mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-27 15:46:10 +03:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into ms-reference-strip

Browse Source 
* master: (276 commits)
  Changelog for #2280 and #2238
  remove trailing space
  fix problem with click precision on ReferenceStrip
  Changelog for #2273
  Also add documentation for tileRetryDelay
  try fix with check for null and undefined
  fix build error
  Add tileRetryMax documentation.
  Revert async support and event breaking support in EventSource.
  Changelog for #2276
  add box-sizing property to the navigator display region
  Implement support for async function and promise type recognition with $.type. Add $.Promise proxy. Implement support for promises in EventSource. Implement ability to abort events as well as prioritize events.
  Changelog for #2270
  issues/2192 fix.
  Starting 4.0.1
  Version 4.0.0
  JSDoc fixes
  Changelog for #2256
  Changelog for #2249
  removed polling vs resizeviewer option from demo
  ...
This commit is contained in:
Mark Salsbery 2023-02-01 09:26:49 -08:00
commit e0f9c94bb5
118 changed files with 14634 additions and 7559 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -8,3 +8,4 @@ instrumented/
/nbproject/private/ /nbproject/private/
.directory .directory
local-test local-test
.DS_Store

2
.travis.yml
View File

@ -1,6 +1,6 @@
language: node_js language: node_js
sudo: false sudo: false
node_js: node_js:
- "stable" - "16.14.2"
before_install: before_install:
- npm install -g grunt-cli - npm install -g grunt-cli

10
CONTRIBUTING.md
View File

@ -3,20 +3,20 @@
OpenSeadragon is truly a community project; we welcome your involvement! OpenSeadragon is truly a community project; we welcome your involvement!
When contributing, please attempt to match the code style already in the codebase. When contributing, please attempt to match the code style already in the codebase.
However, we are in the process of changing our code style (see issue [#456](https://github.com/openseadragon/openseadragon/issues/456)), so avoid spaces inside parentheses and square brackets. Note that we use four spaces per indentation stop. For easier setup you can also install [EditorConfig](http://editorconfig.org/) if your IDE is supported. For more thoughts on code style, see [idiomatic.js](https://github.com/rwldrn/idiomatic.js/). However, we are in the process of changing our code style (see issue [#456](https://github.com/openseadragon/openseadragon/issues/456)), so avoid spaces inside parentheses and square brackets. Note that we use four spaces per indentation stop. For easier setup you can also install [EditorConfig](https://editorconfig.org/) if your IDE is supported. For more thoughts on code style, see [idiomatic.js](https://github.com/rwldrn/idiomatic.js/).
When fixing bugs and adding features, when appropriate please also: When fixing bugs and adding features, when appropriate please also:
* Update related doc comments (we use [JSDoc 3](http://usejsdoc.org/)) * Update related doc comments (we use [JSDoc 3](https://jsdoc.app/))
* Add/update related unit tests * Add/update related unit tests
If you're new to the project, check out our [good first bug](https://github.com/openseadragon/openseadragon/issues?labels=good+first+bug&page=1&state=open) issues for some places to dip your toe in the water. If you're new to the project, check out our [good first issues](https://github.com/openseadragon/openseadragon/issues?labels=good+first+issue&page=1&state=open) for some places to dip your toe in the water.
If you're new to open source in general, check out [GitHub's open source intro guide](https://guides.github.com/activities/contributing-to-open-source/). If you're new to open source in general, check out [GitHub's open source intro guide](https://guides.github.com/activities/contributing-to-open-source/).
### First Time Setup ### First Time Setup
All command-line operations for building and testing OpenSeadragon are scripted using [Grunt](http://gruntjs.com/) which is based on [Node.js](http://nodejs.org/). To get set up: All command-line operations for building and testing OpenSeadragon are scripted using [Grunt](https://gruntjs.com/) which is based on [Node.js](https://nodejs.org/). To get set up:
1. Install Node, if you haven't already (available at the link above) 1. Install Node, if you haven't already (available at the link above)
1. Install the Grunt command line runner (if you haven't already); on the command line, run `npm install -g grunt-cli` 1. Install the Grunt command line runner (if you haven't already); on the command line, run `npm install -g grunt-cli`
@ -57,7 +57,7 @@ You can also publish the built version to the site-build repository. This assume
### Testing ### Testing
Our tests are based on [QUnit](http://qunitjs.com/) and [Puppeteer](https://github.com/GoogleChrome/puppeteer); they're both installed when you run `npm install`. To run on the command line: Our tests are based on [QUnit](https://qunitjs.com/) and [Puppeteer](https://github.com/GoogleChrome/puppeteer); they're both installed when you run `npm install`. To run on the command line:
grunt test grunt test

2
Gruntfile.js
View File

@ -197,7 +197,7 @@ module.exports = function(grunt) {
}, },
eslint: { eslint: {
options: { options: {
configFile: '.eslintrc.json' overrideConfigFile: '.eslintrc.json'
}, },
target: sources target: sources
}, },

2
LICENSE.txt
View File

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

21
README.md
View File

@ -1,18 +1,29 @@
# OpenSeadragon # OpenSeadragon
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/openseadragon/openseadragon?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Build Status](https://secure.travis-ci.org/openseadragon/openseadragon.png?branch=master)](http://travis-ci.org/openseadragon/openseadragon)
<!-- [![Gitter][gitter-badge]][gitter]
[![Build Status][build-badge]][build] -->
An open-source, web-based viewer for zoomable images, implemented in pure JavaScript. An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.
See it in action and get started using it at [http://openseadragon.github.io/](http://openseadragon.github.io/). See it in action and get started using it at [https://openseadragon.github.io/][openseadragon].
## Stable Builds ## Stable Builds
See the [GitHub releases page](https://github.com/openseadragon/openseadragon/releases). See the [GitHub releases page][github-releases].
## Development ## Development
If you want to use OpenSeadragon in your own projects, you can find the latest stable build, API documentation, and example code at [http://openseadragon.github.io/](http://openseadragon.github.io/). If you want to modify OpenSeadragon and/or contribute to its development, read the [contributing guide](https://github.com/openseadragon/openseadragon/blob/master/CONTRIBUTING.md) for instructions. If you want to use OpenSeadragon in your own projects, you can find the latest stable build, API documentation, and example code at [https://openseadragon.github.io/][openseadragon]. If you want to modify OpenSeadragon and/or contribute to its development, read the [contributing guide][github-contributing] for instructions.
## License ## License
OpenSeadragon is released under the New BSD license. For details, see the [LICENSE.txt file](https://github.com/openseadragon/openseadragon/blob/master/LICENSE.txt). OpenSeadragon is released under the New BSD license. For details, see the [LICENSE.txt file][github-license].
[openseadragon]: https://openseadragon.github.io/
<!-- [gitter-badge]: https://badges.gitter.im/Join%20Chat.svg
[gitter]: https://gitter.im/openseadragon/openseadragon?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
[build-badge]: https://secure.travis-ci.org/openseadragon/openseadragon.png?branch=master
[build]: https://travis-ci.org/openseadragon/openseadragon -->
[github-releases]: https://github.com/openseadragon/openseadragon/releases
[github-contributing]: https://github.com/openseadragon/openseadragon/blob/master/CONTRIBUTING.md
[github-license]: https://github.com/openseadragon/openseadragon/blob/master/LICENSE.txt

59
changelog.txt
View File

@ -1,7 +1,60 @@
OPENSEADRAGON CHANGELOG OPENSEADRAGON CHANGELOG
======================= =======================
3.0.0: (In progress) 4.0.1: (in progress...)
* 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)
* 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)
4.0.0:
* NEW BEHAVIOR: Setting the viewport rotation now animates by default (pass false 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)
* Improved the constraints that keep the image in the viewer, specifically when zoomed out a lot (#2160 @joedf, #2246 @pearcetm)
* You can now provide an element for the navigator (as an alternative to an ID) (#1303 @cameronbaney, #2166 #2175 @joedf)
* Now supporting IIIF "id" and "identifier" in addition to "@id" (#2173 @ahankinson)
* 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)
* Fixed: On startup you would get an unnecessary "Viewer.buttons is deprecated" warning (#2201 @joedf, #2219 @jssullivan, #2212 @joedf)
3.1.0:
* Added subPixelRoundingForTransparency Viewer option to address seams that can appear in semi-transparent images (#2075 @TanukiSharp)
* Added Viewer.isAnimating() (#2075 @TanukiSharp)
* Added isFullScreen method to Viewer (#2067 @JachiOnuoha)
* Added option to include POST data when loading files via Ajax (#2072 @Aiosa)
* Exposed TiledImage's private functions for better maintainability (#2134 @Aiosa)
* Tile cache keys are now generated by the tile source, so it's easier to override them as needed (#2138 @Aiosa)
* Pinch to zoom now zooms around the center of the pinch, rather than the center of the viewer (#2158 @cavenel)
* Added fallback and deprecation warning for Viewer.buttons (which got changed to buttonGroup in 3.0.0) (#2153 @devbyjonah)
* Fixed an issue where turning off panVertical or panHorizontal would not affect the panning keyboard combos (#2069 @JachiOnuoha)
* Cleaned up console.logs so that errors and warnings use console.error and console.warn as appropriate (#2073 @Abhishek-90)
* Improved documentation (#2067 @JachiOnuoha, #2112 @shyamkumaryadav, #2152 @joedf, #2155 @samwilson)
* Fixed: Setting useCanvas to false would break the viewer (#2116 @rvv-bouvet)
* Allow silencing multi-image warnings on viewport coordinate conversion functions (#2120 @claycoleman)
* Fixed: Swiping fast multiple times made contact points in MouseTracker out of sync for touch events (#2121 @ronnymikalsen)
* Made MouseTracker more robust in certain scenarios (#2134, #2147 @Aiosa)
* Fixed an issue where full page mode wouldn't grow properly if you resized the window (#2100 @TanukiSharp)
* Now if you pass an error handler into makeAjaxRequest, it doesn't report errors into the console (#2142 @Aiosa)
* Fixed error caused by attaching MouseTracker to the page's document element (#2145 @tdiprima)
* Fixed an issue that would sometimes cause problems with freeing up ImageTileSource memory (#2162 @pearcetm)
3.0.0:
* BREAKING CHANGE: Dropped support for older browsers (IE < 11) (#1872 #1949 #1951 @msalsbery, #1950 @rmontroy) * BREAKING CHANGE: Dropped support for older browsers (IE < 11) (#1872 #1949 #1951 @msalsbery, #1950 @rmontroy)
* BREAKING CHANGE: Removed deprecated OpenSeadragon.getEvent function (#1949 @msalsbery) * BREAKING CHANGE: Removed deprecated OpenSeadragon.getEvent function (#1949 @msalsbery)
@ -55,6 +108,10 @@ OPENSEADRAGON CHANGELOG
* Now ensuring that the new item is already in the navigator when the "add-item" event fires (#2005 @RammasEchor) * Now ensuring that the new item is already in the navigator when the "add-item" event fires (#2005 @RammasEchor)
* Added keys to change image in sequence mode (j: previous, k: next) (#2007 @RammasEchor) * Added keys to change image in sequence mode (j: previous, k: next) (#2007 @RammasEchor)
* Fixed a bug where the navigator wouldn't pick up opacity/composite changes made while it is loading (#2018 @crydell) * Fixed a bug where the navigator wouldn't pick up opacity/composite changes made while it is loading (#2018 @crydell)
* Explicitly set passive:false for wheel event handlers to suppress console warnings. Fixes #1669 (#2043 @msalsbery)
* Viewer's canvas-click events now include an originalTarget property so you can know which element received the click (#2037 @iangilman)
* Added method for getting the size of an image in window coordinates (#2049 @superbland)
* Added a setMaxLevel function to TileSource so you can change its maxLevel if needed (#2059, #2066 @kim-sanghoon)
2.4.2: 2.4.2:

9444
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "openseadragon", "name": "openseadragon",
"version": "2.4.2", "version": "4.0.0",
"description": "Provides a smooth, zoomable user interface for HTML/Javascript.", "description": "Provides a smooth, zoomable user interface for HTML/Javascript.",
"keywords": [ "keywords": [
"image", "image",
@ -29,15 +29,15 @@
"url": "https://github.com/openseadragon/openseadragon.git" "url": "https://github.com/openseadragon/openseadragon.git"
}, },
"devDependencies": { "devDependencies": {
"grunt": "^1.1.0", "grunt": "^1.4.1",
"grunt-contrib-clean": "^2.0.0", "grunt-contrib-clean": "^2.0.0",
"grunt-contrib-compress": "^1.6.0", "grunt-contrib-compress": "^2.0.0",
"grunt-contrib-concat": "^1.0.1", "grunt-contrib-concat": "^2.0.0",
"grunt-contrib-connect": "^2.1.0", "grunt-contrib-connect": "^3.0.0",
"grunt-contrib-qunit": "^3.1.0", "grunt-contrib-qunit": "^6.2.0",
"grunt-contrib-uglify": "^4.0.1", "grunt-contrib-uglify": "^5.0.1",
"grunt-contrib-watch": "^1.1.0", "grunt-contrib-watch": "^1.1.0",
"grunt-eslint": "^23.0.0", "grunt-eslint": "^24.0.0",
"grunt-git-describe": "^2.4.4", "grunt-git-describe": "^2.4.4",
"grunt-istanbul": "^0.8.0", "grunt-istanbul": "^0.8.0",
"grunt-text-replace": "^0.4.0", "grunt-text-replace": "^0.4.0",

4
src/button.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Button * OpenSeadragon - Button
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -398,6 +398,7 @@ $.extend( $.Button.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.
disable: function(){ disable: function(){
this.notifyGroupExit(); this.notifyGroupExit();
this.element.disabled = true; this.element.disabled = true;
this.tracker.setTracking(false);
$.setElementOpacity( this.element, 0.2, true ); $.setElementOpacity( this.element, 0.2, true );
}, },
@ -406,6 +407,7 @@ $.extend( $.Button.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.
*/ */
enable: function(){ enable: function(){
this.element.disabled = false; this.element.disabled = false;
this.tracker.setTracking(true);
$.setElementOpacity( this.element, 1.0, true ); $.setElementOpacity( this.element, 1.0, true );
this.notifyGroupEnter(); this.notifyGroupEnter();
}, },

2
src/buttongroup.js
View File

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

6
src/control.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Control * OpenSeadragon - Control
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -74,6 +74,7 @@ $.ControlAnchor = {
* @param {Element} container - the element to control will be anchored too. * @param {Element} container - the element to control will be anchored too.
*/ */
$.Control = function ( element, options, container ) { $.Control = function ( element, options, container ) {
var parent = element.parentNode; var parent = element.parentNode;
if (typeof options === 'number') if (typeof options === 'number')
{ {
@ -150,6 +151,7 @@ $.Control = function ( element, options, container ) {
} else { } else {
parent.appendChild( this.wrapper ); parent.appendChild( this.wrapper );
} }
}; };
/** @lends OpenSeadragon.Control.prototype */ /** @lends OpenSeadragon.Control.prototype */
@ -169,7 +171,7 @@ $.Control.prototype = {
/** /**
* Determines if the control is currently visible. * Determines if the control is currently visible.
* @function * @function
* @return {Boolean} true if currently visible, false otherwise. * @returns {Boolean} true if currently visible, false otherwise.
*/ */
isVisible: function() { isVisible: function() {
return this.wrapper.style.display !== "none"; return this.wrapper.style.display !== "none";

10
src/controldock.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - ControlDock * OpenSeadragon - ControlDock
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -149,7 +149,7 @@
/** /**
* @function * @function
* @return {OpenSeadragon.ControlDock} Chainable. * @returns {OpenSeadragon.ControlDock} Chainable.
*/ */
removeControl: function ( element ) { removeControl: function ( element ) {
element = $.getElement( element ); element = $.getElement( element );
@ -165,7 +165,7 @@
/** /**
* @function * @function
* @return {OpenSeadragon.ControlDock} Chainable. * @returns {OpenSeadragon.ControlDock} Chainable.
*/ */
clearControls: function () { clearControls: function () {
while ( this.controls.length > 0 ) { while ( this.controls.length > 0 ) {
@ -178,7 +178,7 @@
/** /**
* @function * @function
* @return {Boolean} * @returns {Boolean}
*/ */
areControlsEnabled: function () { areControlsEnabled: function () {
var i; var i;
@ -195,7 +195,7 @@
/** /**
* @function * @function
* @return {OpenSeadragon.ControlDock} Chainable. * @returns {OpenSeadragon.ControlDock} Chainable.
*/ */
setControlsEnabled: function( enabled ) { setControlsEnabled: function( enabled ) {
var i; var i;

2
src/displayrectangle.js
View File

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

31
src/drawer.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Drawer * OpenSeadragon - Drawer
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -176,6 +176,7 @@ $.Drawer.prototype = {
* This function does not take rotation into account, thus assuming provided * This function does not take rotation into account, thus assuming provided
* point is at 0 degree. * point is at 0 degree.
* @param {OpenSeadragon.Point} point - the pixel point to convert * @param {OpenSeadragon.Point} point - the pixel point to convert
* @returns {OpenSeadragon.Point} Point in drawer coordinate system.
*/ */
viewportCoordToDrawerCoord: function(point) { viewportCoordToDrawerCoord: function(point) {
var vpPoint = this.viewport.pixelFromPointNoRotate(point, true); var vpPoint = this.viewport.pixelFromPointNoRotate(point, true);
@ -208,7 +209,7 @@ $.Drawer.prototype = {
/** /**
* Set the opacity of the drawer. * Set the opacity of the drawer.
* @param {Number} opacity * @param {Number} opacity
* @return {OpenSeadragon.Drawer} Chainable. * @returns {OpenSeadragon.Drawer} Chainable.
*/ */
setOpacity: function( opacity ) { setOpacity: function( opacity ) {
$.console.error("drawer.setOpacity is deprecated. Use tiledImage.setOpacity instead."); $.console.error("drawer.setOpacity is deprecated. Use tiledImage.setOpacity instead.");
@ -264,7 +265,7 @@ $.Drawer.prototype = {
}, },
/** /**
* @return {Boolean} True if rotation is supported. * @returns {Boolean} True if rotation is supported.
*/ */
canRotate: function() { canRotate: function() {
return this.useCanvas; return this.useCanvas;
@ -321,7 +322,7 @@ $.Drawer.prototype = {
* Scale from OpenSeadragon viewer rectangle to drawer rectangle * Scale from OpenSeadragon viewer rectangle to drawer rectangle
* (ignoring rotation) * (ignoring rotation)
* @param {OpenSeadragon.Rect} rectangle - The rectangle in viewport coordinate system. * @param {OpenSeadragon.Rect} rectangle - The rectangle in viewport coordinate system.
* @return {OpenSeadragon.Rect} Rectangle in drawer coordinate system. * @returns {OpenSeadragon.Rect} Rectangle in drawer coordinate system.
*/ */
viewportToDrawerRectangle: function(rectangle) { viewportToDrawerRectangle: function(rectangle) {
var topLeft = this.viewport.pixelFromPointNoRotate(rectangle.getTopLeft(), true); var topLeft = this.viewport.pixelFromPointNoRotate(rectangle.getTopLeft(), true);
@ -344,15 +345,19 @@ $.Drawer.prototype = {
* where <code>rendered</code> is the context with the pre-drawn image. * where <code>rendered</code> is the context with the pre-drawn image.
* @param {Float} [scale=1] - Apply a scale to tile position and size. Defaults to 1. * @param {Float} [scale=1] - Apply a scale to tile position and size. Defaults to 1.
* @param {OpenSeadragon.Point} [translate] A translation vector to offset tile position * @param {OpenSeadragon.Point} [translate] A translation vector to offset tile position
* @param {Boolean} [shouldRoundPositionAndSize] - Tells whether to round
* position and size of tiles supporting alpha channel in non-transparency
* context.
* @param {OpenSeadragon.TileSource} source - The source specification of the tile.
*/ */
drawTile: function(tile, drawingHandler, useSketch, scale, translate) { drawTile: function( tile, drawingHandler, useSketch, scale, translate, shouldRoundPositionAndSize, source) {
$.console.assert(tile, '[Drawer.drawTile] tile is required'); $.console.assert(tile, '[Drawer.drawTile] tile is required');
$.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required'); $.console.assert(drawingHandler, '[Drawer.drawTile] drawingHandler is required');
if (this.useCanvas) { if (this.useCanvas) {
var context = this._getContext(useSketch); var context = this._getContext(useSketch);
scale = scale || 1; scale = scale || 1;
tile.drawCanvas(context, drawingHandler, scale, translate); tile.drawCanvas(context, drawingHandler, scale, translate, shouldRoundPositionAndSize, source);
} else { } else {
tile.drawHTML( this.canvas ); tile.drawHTML( this.canvas );
} }
@ -544,8 +549,8 @@ $.Drawer.prototype = {
context.strokeStyle = this.debugGridColor[colorIndex]; context.strokeStyle = this.debugGridColor[colorIndex];
context.fillStyle = this.debugGridColor[colorIndex]; context.fillStyle = this.debugGridColor[colorIndex];
if ( this.viewport.degrees !== 0 ) { if (this.viewport.getRotation(true) % 360 !== 0 ) {
this._offsetForRotation({degrees: this.viewport.degrees}); this._offsetForRotation({degrees: this.viewport.getRotation(true)});
} }
if (tiledImage.getRotation(true) % 360 !== 0) { if (tiledImage.getRotation(true) % 360 !== 0) {
this._offsetForRotation({ this._offsetForRotation({
@ -554,7 +559,8 @@ $.Drawer.prototype = {
tiledImage._getRotationPoint(true), true) tiledImage._getRotationPoint(true), true)
}); });
} }
if (tiledImage.viewport.degrees === 0 && tiledImage.getRotation(true) % 360 === 0){ if (tiledImage.viewport.getRotation(true) % 360 === 0 &&
tiledImage.getRotation(true) % 360 === 0) {
if(tiledImage._drawer.viewer.viewport.getFlip()) { if(tiledImage._drawer.viewer.viewport.getFlip()) {
tiledImage._drawer._flip(); tiledImage._drawer._flip();
} }
@ -572,7 +578,7 @@ $.Drawer.prototype = {
// Rotate the text the right way around. // Rotate the text the right way around.
context.translate( tileCenterX, tileCenterY ); context.translate( tileCenterX, tileCenterY );
context.rotate( Math.PI / 180 * -this.viewport.degrees ); context.rotate( Math.PI / 180 * -this.viewport.getRotation(true) );
context.translate( -tileCenterX, -tileCenterY ); context.translate( -tileCenterX, -tileCenterY );
if( tile.x === 0 && tile.y === 0 ){ if( tile.x === 0 && tile.y === 0 ){
@ -618,14 +624,15 @@ $.Drawer.prototype = {
(tile.position.y + 70) * $.pixelDensityRatio (tile.position.y + 70) * $.pixelDensityRatio
); );
if ( this.viewport.degrees !== 0 ) { if (this.viewport.getRotation(true) % 360 !== 0 ) {
this._restoreRotationChanges(); this._restoreRotationChanges();
} }
if (tiledImage.getRotation(true) % 360 !== 0) { if (tiledImage.getRotation(true) % 360 !== 0) {
this._restoreRotationChanges(); this._restoreRotationChanges();
} }
if (tiledImage.viewport.degrees === 0 && tiledImage.getRotation(true) % 360 === 0){ if (tiledImage.viewport.getRotation(true) % 360 === 0 &&
tiledImage.getRotation(true) % 360 === 0) {
if(tiledImage._drawer.viewer.viewport.getFlip()) { if(tiledImage._drawer.viewer.viewport.getFlip()) {
tiledImage._drawer._flip(); tiledImage._drawer._flip();
} }

7
src/dzitilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - DziTileSource * OpenSeadragon - DziTileSource
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -124,10 +124,11 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
* @function * @function
* @param {Object|XMLDocument} data - the raw configuration * @param {Object|XMLDocument} data - the raw configuration
* @param {String} url - the url the data was retrieved from if any. * @param {String} url - the url the data was retrieved from if any.
* @return {Object} options - A dictionary of keyword arguments sufficient * @param {String} postData - HTTP POST data in k=v&k2=v2... form or null
* @returns {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor. * to configure this tile sources constructor.
*/ */
configure: function( data, url ){ configure: function( data, url, postData ){
var options; var options;

44
src/eventsource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - EventSource * OpenSeadragon - EventSource
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * 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) * 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 * @function
* @param {String} eventName - Name of event to register. * @param {String} eventName - Name of event to register.
* @param {OpenSeadragon.EventHandler} handler - Function to call when event * @param {OpenSeadragon.EventHandler} handler - Function to call when event
@ -67,8 +67,9 @@ $.EventSource.prototype = {
* to the handler. * to the handler.
* @param {Number} [times=1] - The number of times to handle the event * @param {Number} [times=1] - The number of times to handle the event
* before removing it. * 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; var self = this;
times = times || 1; times = times || 1;
var count = 0; var count = 0;
@ -77,9 +78,9 @@ $.EventSource.prototype = {
if (count === times) { if (count === times) {
self.removeHandler(eventName, onceHandler); 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 {String} eventName - Name of event to register.
* @param {OpenSeadragon.EventHandler} handler - Function to call when event is triggered. * @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 {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 ]; var events = this.events[ eventName ];
if ( !events ) { if ( !events ) {
this.events[ eventName ] = events = []; this.events[ eventName ] = events = [];
} }
if ( handler && $.isFunction( handler ) ) { 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--;
}
} }
}, },
@ -122,6 +131,18 @@ $.EventSource.prototype = {
} }
}, },
/**
* Get the amount of handlers registered for a given event.
* @param {String} eventName - Name of event to inspect.
* @returns {number} amount of events
*/
numberOfHandlers: function (eventName) {
var events = this.events[ eventName ];
if ( !events ) {
return 0;
}
return events.length;
},
/** /**
* Remove all event handlers for a given event type. If no type is given all * Remove all event handlers for a given event type. If no type is given all
@ -174,15 +195,12 @@ $.EventSource.prototype = {
raiseEvent: function( eventName, eventArgs ) { raiseEvent: function( eventName, eventArgs ) {
//uncomment if you want to get a log of all events //uncomment if you want to get a log of all events
//$.console.log( eventName ); //$.console.log( eventName );
var handler = this.getHandler( eventName ); var handler = this.getHandler( eventName );
if ( handler ) { if ( handler ) {
if ( !eventArgs ) { return handler( this, eventArgs || {} );
eventArgs = {};
}
handler( this, eventArgs );
} }
return undefined;
} }
}; };

2
src/fullscreen.js
View File

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

74
src/iiiftilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - IIIFTileSource * OpenSeadragon - IIIFTileSource
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -51,8 +51,11 @@ $.IIIFTileSource = function( options ){
$.extend( true, this, options ); $.extend( true, this, options );
if ( !( this.height && this.width && this['@id'] ) ) { /* Normalizes v3-style 'id' keys to an "_id" internal property */
throw new Error( 'IIIF required parameters not provided.' ); this._id = this["@id"] || this["id"] || this['identifier'] || null;
if ( !( this.height && this.width && this._id) ) {
throw new Error( 'IIIF required parameters (width, height, or id) not provided.' );
} }
options.tileSizePerScaleFactor = {}; options.tileSizePerScaleFactor = {};
@ -131,7 +134,7 @@ $.IIIFTileSource = function( options ){
if (!options.maxLevel && !this.emulateLegacyImagePyramid) { if (!options.maxLevel && !this.emulateLegacyImagePyramid) {
if (!this.scale_factors) { if (!this.scale_factors) {
options.maxLevel = Number(Math.ceil(Math.log(Math.max(this.width, this.height), 2))); options.maxLevel = Number(Math.round(Math.log(Math.max(this.width, this.height), 2)));
} else { } else {
var maxScaleFactor = Math.max.apply(null, this.scale_factors); var maxScaleFactor = Math.max.apply(null, this.scale_factors);
options.maxLevel = Math.round(Math.log(maxScaleFactor) * Math.LOG2E); options.maxLevel = Math.round(Math.log(maxScaleFactor) * Math.LOG2E);
@ -147,7 +150,7 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
* this tile source. * this tile source.
* @function * @function
* @param {Object|Array} data * @param {Object|Array} data
* @param {String} optional - url * @param {String} [url] - url
*/ */
supports: function( data, url ) { supports: function( data, url ) {
@ -180,35 +183,43 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
}, },
/** /**
* A static function used to prepare an incoming IIIF Image API info.json
* response for processing by the tile handler. Normalizes data for all
* versions of IIIF (1.0, 1.1, 2.x, 3.x) and returns a data object that
* may be passed to the IIIFTileSource.
* *
* @function * @function
* @static
* @param {Object} data - the raw configuration * @param {Object} data - the raw configuration
* @example <caption>IIIF 1.1 Info Looks like this</caption> * @param {String} url - the url configuration was retrieved from
* @param {String} postData - HTTP POST data in k=v&k2=v2... form or null
* @returns {Object} A normalized IIIF data object
* @example <caption>IIIF 2.x Info Looks like this</caption>
* { * {
* "@context" : "http://library.stanford.edu/iiif/image-api/1.1/context.json", * "@context": "http://iiif.io/api/image/2/context.json",
* "@id": "http://iiif.example.com/prefix/1E34750D-38DB-4825-A38A-B60A345E591C", * "@id": "http://iiif.example.com/prefix/1E34750D-38DB-4825-A38A-B60A345E591C",
* "width" : 6000, * "protocol": "http://iiif.io/api/image",
* "height" : 4000, * "height": 1024,
* "scale_factors" : [ 1, 2, 4 ], * "width": 775,
* "tile_width" : 1024, * "tiles" : [{"width":256, "scaleFactors":[1,2,4,8]}],
* "tile_height" : 1024, * "profile": ["http://iiif.io/api/image/2/level1.json", {
* "formats" : [ "jpg", "png" ], * "qualities": [ "native", "bitonal", "grey", "color" ],
* "qualities" : [ "native", "grey" ], * "formats": [ "jpg", "png", "gif" ]
* "profile" : "http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level0" * }]
* } * }
*/ */
configure: function( data, url ){ configure: function( data, url, postData ){
// Try to deduce our version and fake it upwards if needed // Try to deduce our version and fake it upwards if needed
if ( !$.isPlainObject(data) ) { if ( !$.isPlainObject(data) ) {
var options = configureFromXml10( data ); var options = configureFromXml10( data );
options['@context'] = "http://iiif.io/api/image/1.0/context.json"; options['@context'] = "http://iiif.io/api/image/1.0/context.json";
options['@id'] = url.replace('/info.xml', ''); options["@id"] = url.replace('/info.xml', '');
options.version = 1; options.version = 1;
return options; return options;
} else { } else {
if ( !data['@context'] ) { if ( !data['@context'] ) {
data['@context'] = 'http://iiif.io/api/image/1.0/context.json'; data['@context'] = 'http://iiif.io/api/image/1.0/context.json';
data['@id'] = url.replace('/info.json', ''); data["@id"] = url.replace('/info.json', '');
data.version = 1; data.version = 1;
} else { } else {
var context = data['@context']; var context = data['@context'];
@ -237,9 +248,7 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
$.console.error('Data has a @context property which contains no known IIIF context URI.'); $.console.error('Data has a @context property which contains no known IIIF context URI.');
} }
} }
if ( !data['@id'] && data['id'] ) {
data['@id'] = data['id'];
}
if (data.preferredFormats) { if (data.preferredFormats) {
for (var f = 0; f < data.preferredFormats.length; f++ ) { for (var f = 0; f < data.preferredFormats.length; f++ ) {
if ( OpenSeadragon.imageFormatSupported(data.preferredFormats[f]) ) { if ( OpenSeadragon.imageFormatSupported(data.preferredFormats[f]) ) {
@ -368,8 +377,8 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
scale = Math.pow( 0.5, this.maxLevel - level ), scale = Math.pow( 0.5, this.maxLevel - level ),
//# image dimensions at this level //# image dimensions at this level
levelWidth = Math.ceil( this.width * scale ), levelWidth = Math.round( this.width * scale ),
levelHeight = Math.ceil( this.height * scale ), levelHeight = Math.round( this.height * scale ),
//## iiif region //## iiif region
tileWidth, tileWidth,
@ -389,8 +398,8 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
tileWidth = this.getTileWidth(level); tileWidth = this.getTileWidth(level);
tileHeight = this.getTileHeight(level); tileHeight = this.getTileHeight(level);
iiifTileSizeWidth = Math.ceil( tileWidth / scale ); iiifTileSizeWidth = Math.round( tileWidth / scale );
iiifTileSizeHeight = Math.ceil( tileHeight / scale ); iiifTileSizeHeight = Math.round( tileHeight / scale );
if (this.version === 1) { if (this.version === 1) {
iiifQuality = "native." + this.tileFormat; iiifQuality = "native." + this.tileFormat;
} else { } else {
@ -417,8 +426,8 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
} else { } else {
iiifRegion = [ iiifTileX, iiifTileY, iiifTileW, iiifTileH ].join( ',' ); iiifRegion = [ iiifTileX, iiifTileY, iiifTileW, iiifTileH ].join( ',' );
} }
iiifSizeW = Math.ceil( iiifTileW * scale ); iiifSizeW = Math.round( iiifTileW * scale );
iiifSizeH = Math.ceil( iiifTileH * scale ); iiifSizeH = Math.round( iiifTileH * scale );
if ( this.version === 2 && iiifSizeW === this.width ) { if ( this.version === 2 && iiifSizeW === this.width ) {
iiifSize = "full"; iiifSize = "full";
} else if ( this.version === 3 && iiifSizeW === this.width && iiifSizeH === this.height ) { } else if ( this.version === 3 && iiifSizeW === this.width && iiifSizeH === this.height ) {
@ -429,7 +438,7 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
iiifSize = iiifSizeW + ","; iiifSize = iiifSizeW + ",";
} }
} }
uri = [ this['@id'], iiifRegion, iiifSize, IIIF_ROTATION, iiifQuality ].join( '/' ); uri = [ this._id, iiifRegion, iiifSize, IIIF_ROTATION, iiifQuality ].join( '/' );
return uri; return uri;
}, },
@ -444,8 +453,11 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
/** /**
* Determine whether arbitrary tile requests can be made against a service with the given profile * Determine whether arbitrary tile requests can be made against a service with the given profile
* @function * @function
* @param {array} profile - IIIF profile array * @param {Object} options
* @throws {Error} * @param {Array|String} options.profile
* @param {Number} options.version
* @param {String[]} options.extraFeatures
* @returns {Boolean}
*/ */
function canBeTiled ( options ) { function canBeTiled ( options ) {
var level0Profiles = [ var level0Profiles = [
@ -477,7 +489,7 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
var levels = []; var levels = [];
for(var i = 0; i < options.sizes.length; i++) { for(var i = 0; i < options.sizes.length; i++) {
levels.push({ levels.push({
url: options['@id'] + '/full/' + options.sizes[i].width + ',' + url: options._id + '/full/' + options.sizes[i].width + ',' +
(options.version === 3 ? options.sizes[i].height : '') + (options.version === 3 ? options.sizes[i].height : '') +
'/0/default.' + options.tileFormat, '/0/default.' + options.tileFormat,
width: options.sizes[i].width, width: options.sizes[i].width,

165
src/imageloader.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - ImageLoader * OpenSeadragon - ImageLoader
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -35,126 +35,89 @@
(function($){ (function($){
/** /**
* @private
* @class ImageJob * @class ImageJob
* @classdesc Handles downloading of a single image. * @classdesc Handles downloading of a single image.
* @param {Object} options - Options for this ImageJob. * @param {Object} options - Options for this ImageJob.
* @param {String} [options.src] - URL of image to download. * @param {String} [options.src] - URL of image to download.
* @param {Tile} [options.tile] - Tile that belongs the data to.
* @param {TileSource} [options.source] - Image loading strategy
* @param {String} [options.loadWithAjax] - Whether to load this image with AJAX. * @param {String} [options.loadWithAjax] - Whether to load this image with AJAX.
* @param {String} [options.ajaxHeaders] - Headers to add to the image request if using AJAX. * @param {String} [options.ajaxHeaders] - Headers to add to the image request if using AJAX.
* @param {Boolean} [options.ajaxWithCredentials] - Whether to set withCredentials on AJAX requests.
* @param {String} [options.crossOriginPolicy] - CORS policy to use for downloads * @param {String} [options.crossOriginPolicy] - CORS policy to use for downloads
* @param {String} [options.postData] - HTTP POST data (usually but not necessarily in k=v&k2=v2... form,
* see TileSource::getPostData) or null
* @param {Function} [options.callback] - Called once image has been downloaded. * @param {Function} [options.callback] - Called once image has been downloaded.
* @param {Function} [options.abort] - Called when this image job is aborted. * @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.timeout] - The max number of milliseconds that this image job may take to complete.
* @param {Number} [options.tries] - Actual number of the current try.
*/ */
function ImageJob (options) { $.ImageJob = function(options) {
$.extend(true, this, { $.extend(true, this, {
timeout: $.DEFAULT_SETTINGS.timeout, timeout: $.DEFAULT_SETTINGS.timeout,
jobId: null jobId: null,
tries: 0
}, options); }, options);
/** /**
* Image object which will contain downloaded image. * Data object which will contain downloaded image data.
* @member {Image} image * @member {Image|*} image data object, by default an Image object (depends on TileSource)
* @memberof OpenSeadragon.ImageJob# * @memberof OpenSeadragon.ImageJob#
*/ */
this.image = null; this.data = null;
}
ImageJob.prototype = { /**
errorMsg: null, * User workspace to populate with helper variables
* @member {*} userData to append custom data and avoid namespace collision
* @memberof OpenSeadragon.ImageJob#
*/
this.userData = {};
/**
* Error message holder
* @member {string} error message
* @memberof OpenSeadragon.ImageJob#
* @private
*/
this.errorMsg = null;
};
$.ImageJob.prototype = {
/** /**
* Starts the image job. * Starts the image job.
* @method * @method
*/ */
start: function() { start: function() {
this.tries++;
var self = this; var self = this;
var selfAbort = this.abort; var selfAbort = this.abort;
this.image = new Image();
this.image.onload = function(){
self.finish(true);
};
this.image.onabort = this.image.onerror = function() {
self.errorMsg = "Image load aborted";
self.finish(false);
};
this.jobId = window.setTimeout(function () { this.jobId = window.setTimeout(function () {
self.errorMsg = "Image load exceeded timeout (" + self.timeout + " ms)"; self.finish(null, null, "Image load exceeded timeout (" + self.timeout + " ms)");
self.finish(false);
}, this.timeout); }, this.timeout);
// Load the tile with an AJAX request if the loadWithAjax option is
// set. Otherwise load the image by setting the source proprety of the image object.
if (this.loadWithAjax) {
this.request = $.makeAjaxRequest({
url: this.src,
withCredentials: this.ajaxWithCredentials,
headers: this.ajaxHeaders,
responseType: "arraybuffer",
success: function(request) {
var blb;
// Make the raw data into a blob.
// BlobBuilder fallback adapted from
// http://stackoverflow.com/questions/15293694/blob-constructor-browser-compatibility
try {
blb = new window.Blob([request.response]);
} catch (e) {
var BlobBuilder = (
window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder
);
if (e.name === 'TypeError' && BlobBuilder) {
var bb = new BlobBuilder();
bb.append(request.response);
blb = bb.getBlob();
}
}
// If the blob is empty for some reason consider the image load a failure.
if (blb.size === 0) {
self.errorMsg = "Empty image response.";
self.finish(false);
}
// Create a URL for the blob data and make it the source of the image object.
// This will still trigger Image.onload to indicate a successful tile load.
var url = (window.URL || window.webkitURL).createObjectURL(blb);
self.image.src = url;
},
error: function(request) {
self.errorMsg = "Image load aborted - XHR error";
self.finish(false);
}
});
// Provide a function to properly abort the request.
this.abort = function() { this.abort = function() {
self.request.abort(); self.source.downloadTileAbort(self);
// Call the existing abort function if available
if (typeof selfAbort === "function") { if (typeof selfAbort === "function") {
selfAbort(); selfAbort();
} }
}; };
} else {
if (this.crossOriginPolicy !== false) {
this.image.crossOrigin = this.crossOriginPolicy;
}
this.image.src = this.src; this.source.downloadTileStart(this);
}
}, },
finish: function(successful) { /**
this.image.onload = this.image.onerror = this.image.onabort = null; * Finish this job.
if (!successful) { * @param {*} data data that has been downloaded
this.image = null; * @param {XMLHttpRequest} request reference to the request if used
} * @param {string} errorMessage description upon failure
*/
finish: function(data, request, errorMessage ) {
this.data = data;
this.request = request;
this.errorMsg = errorMessage;
if (this.jobId) { if (this.jobId) {
window.clearTimeout(this.jobId); window.clearTimeout(this.jobId);
@ -162,7 +125,6 @@ ImageJob.prototype = {
this.callback(this); this.callback(this);
} }
}; };
/** /**
@ -180,6 +142,7 @@ $.ImageLoader = function(options) {
jobLimit: $.DEFAULT_SETTINGS.imageLoaderLimit, jobLimit: $.DEFAULT_SETTINGS.imageLoaderLimit,
timeout: $.DEFAULT_SETTINGS.timeout, timeout: $.DEFAULT_SETTINGS.timeout,
jobQueue: [], jobQueue: [],
failedTiles: [],
jobsInProgress: 0 jobsInProgress: 0
}, options); }, options);
@ -193,30 +156,48 @@ $.ImageLoader.prototype = {
* @method * @method
* @param {Object} options - Options for this job. * @param {Object} options - Options for this job.
* @param {String} [options.src] - URL of image to download. * @param {String} [options.src] - URL of image to download.
* @param {Tile} [options.tile] - Tile that belongs the data to. The tile instance
* is not internally used and serves for custom TileSources implementations.
* @param {TileSource} [options.source] - Image loading strategy
* @param {String} [options.loadWithAjax] - Whether to load this image with AJAX. * @param {String} [options.loadWithAjax] - Whether to load this image with AJAX.
* @param {String} [options.ajaxHeaders] - Headers to add to the image request if using AJAX. * @param {String} [options.ajaxHeaders] - Headers to add to the image request if using AJAX.
* @param {String|Boolean} [options.crossOriginPolicy] - CORS policy to use for downloads * @param {String|Boolean} [options.crossOriginPolicy] - CORS policy to use for downloads
* @param {String} [options.postData] - POST parameters (usually but not necessarily in k=v&k2=v2... form,
* see TileSource::getPostData) or null
* @param {Boolean} [options.ajaxWithCredentials] - Whether to set withCredentials on AJAX * @param {Boolean} [options.ajaxWithCredentials] - Whether to set withCredentials on AJAX
* requests. * requests.
* @param {Function} [options.callback] - Called once image has been downloaded. * @param {Function} [options.callback] - Called once image has been downloaded.
* @param {Function} [options.abort] - Called when this image job is aborted. * @param {Function} [options.abort] - Called when this image job is aborted.
*/ */
addJob: function(options) { addJob: function(options) {
if (!options.source) {
$.console.error('ImageLoader.prototype.addJob() requires [options.source]. ' +
'TileSource since new API defines how images are fetched. Creating a dummy TileSource.');
var implementation = $.TileSource.prototype;
options.source = {
downloadTileStart: implementation.downloadTileStart,
downloadTileAbort: implementation.downloadTileAbort
};
}
var _this = this, var _this = this,
complete = function(job) { complete = function(job) {
completeJob(_this, job, options.callback); completeJob(_this, job, options.callback);
}, },
jobOptions = { jobOptions = {
src: options.src, src: options.src,
tile: options.tile || {},
source: options.source,
loadWithAjax: options.loadWithAjax, loadWithAjax: options.loadWithAjax,
ajaxHeaders: options.loadWithAjax ? options.ajaxHeaders : null, ajaxHeaders: options.loadWithAjax ? options.ajaxHeaders : null,
crossOriginPolicy: options.crossOriginPolicy, crossOriginPolicy: options.crossOriginPolicy,
ajaxWithCredentials: options.ajaxWithCredentials, ajaxWithCredentials: options.ajaxWithCredentials,
postData: options.postData,
callback: complete, callback: complete,
abort: options.abort, abort: options.abort,
timeout: this.timeout timeout: this.timeout
}, },
newJob = new ImageJob(jobOptions); newJob = new $.ImageJob(jobOptions);
if ( !this.jobLimit || this.jobsInProgress < this.jobLimit ) { if ( !this.jobLimit || this.jobsInProgress < this.jobLimit ) {
newJob.start(); newJob.start();
@ -244,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 * @method
* @private * @private
* @param loader - ImageLoader used to start job. * @param loader - ImageLoader used to start job.
@ -252,6 +234,9 @@ $.ImageLoader.prototype = {
* @param callback - Called once cleanup is finished. * @param callback - Called once cleanup is finished.
*/ */
function completeJob(loader, job, callback) { function completeJob(loader, job, callback) {
if (job.errorMsg !== '' && (job.image === null || job.image === undefined) && job.tries < 1 + loader.tileRetryMax) {
loader.failedTiles.push(job);
}
var nextJob; var nextJob;
loader.jobsInProgress--; loader.jobsInProgress--;
@ -262,7 +247,17 @@ function completeJob(loader, job, callback) {
loader.jobsInProgress++; loader.jobsInProgress++;
} }
callback(job.image, job.errorMsg, job.request); 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);
} }
}(OpenSeadragon)); }(OpenSeadragon));

9
src/imagetilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - ImageTileSource * OpenSeadragon - ImageTileSource
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -89,10 +89,11 @@
* @function * @function
* @param {Object} options - the options * @param {Object} options - the options
* @param {String} dataUrl - the url the image was retrieved from, if any. * @param {String} dataUrl - the url the image was retrieved from, if any.
* @return {Object} options - A dictionary of keyword arguments sufficient * @param {String} postData - HTTP POST data in k=v&k2=v2... form or null
* @returns {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor. * to configure this tile sources constructor.
*/ */
configure: function (options, dataUrl) { configure: function (options, dataUrl, postData) {
return options; return options;
}, },
/** /**
@ -271,9 +272,11 @@
*/ */
_freeupCanvasMemory: function () { _freeupCanvasMemory: function () {
for (var i = 0; i < this.levels.length; i++) { for (var i = 0; i < this.levels.length; i++) {
if(this.levels[i].context2D){
this.levels[i].context2D.canvas.height = 0; this.levels[i].context2D.canvas.height = 0;
this.levels[i].context2D.canvas.width = 0; this.levels[i].context2D.canvas.width = 0;
} }
}
}, },
}); });

7
src/legacytilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - LegacyTileSource * OpenSeadragon - LegacyTileSource
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -122,10 +122,11 @@ $.extend( $.LegacyTileSource.prototype, $.TileSource.prototype, /** @lends OpenS
* @function * @function
* @param {Object|XMLDocument} configuration - the raw configuration * @param {Object|XMLDocument} configuration - the raw configuration
* @param {String} dataUrl - the url the data was retrieved from if any. * @param {String} dataUrl - the url the data was retrieved from if any.
* @return {Object} options - A dictionary of keyword arguments sufficient * @param {String} postData - HTTP POST data in k=v&k2=v2... form or null
* @returns {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor. * to configure this tile sources constructor.
*/ */
configure: function( configuration, dataUrl ){ configure: function( configuration, dataUrl, postData ){
var options; var options;

61
src/mousetracker.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - MouseTracker * OpenSeadragon - MouseTracker
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -165,8 +165,8 @@
this.dblClickTimeThreshold = options.dblClickTimeThreshold || $.DEFAULT_SETTINGS.dblClickTimeThreshold; this.dblClickTimeThreshold = options.dblClickTimeThreshold || $.DEFAULT_SETTINGS.dblClickTimeThreshold;
/** /**
* The maximum distance allowed between two pointer click events * The maximum distance allowed between two pointer click events
* to be treated as a click gesture. * to be treated as a double-click gesture.
* @member {Number} clickDistThreshold * @member {Number} dblClickDistThreshold
* @memberof OpenSeadragon.MouseTracker# * @memberof OpenSeadragon.MouseTracker#
*/ */
this.dblClickDistThreshold = options.dblClickDistThreshold || $.DEFAULT_SETTINGS.dblClickDistThreshold; this.dblClickDistThreshold = options.dblClickDistThreshold || $.DEFAULT_SETTINGS.dblClickDistThreshold;
@ -271,7 +271,10 @@
lastPinchDist: 0, lastPinchDist: 0,
currentPinchDist: 0, currentPinchDist: 0,
lastPinchCenter: null, lastPinchCenter: null,
currentPinchCenter: null currentPinchCenter: null,
// Tracking for drag
sentDragEvent: false
}; };
this.hasGestureHandlers = !!( this.pressHandler || this.nonPrimaryPressHandler || this.hasGestureHandlers = !!( this.pressHandler || this.nonPrimaryPressHandler ||
@ -737,6 +740,8 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Element} event.originalTarget
* The DOM element clicked on.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -1191,7 +1196,7 @@
* the emulated event, a synthetic event object created with values from the actual DOM event, * the emulated event, a synthetic event object created with values from the actual DOM event,
* or null if no DOM event applies. Emulated events can occur on eventType "wheel" on legacy mouse-scroll * or null if no DOM event applies. Emulated events can occur on eventType "wheel" on legacy mouse-scroll
* event emitting user agents. * event emitting user agents.
* @property {Boolean} isStopable * @property {Boolean} isStoppable
* True if propagation of the event (e.g. bubbling) can be stopped with stopPropagation/stopImmediatePropagation. * True if propagation of the event (e.g. bubbling) can be stopped with stopPropagation/stopImmediatePropagation.
* @property {Boolean} isCancelable * @property {Boolean} isCancelable
* True if the event's default handling by the browser can be prevented with preventDefault. * True if the event's default handling by the browser can be prevented with preventDefault.
@ -1398,7 +1403,6 @@
--this.contacts; --this.contacts;
if (this.contacts < 0) { if (this.contacts < 0) {
$.console.warn('GesturePointList.removeContact() Implausible contacts value');
this.contacts = 0; this.contacts = 0;
} }
} }
@ -1444,6 +1448,8 @@
for ( i = 0; i < pointerListCount; i++ ) { for ( i = 0; i < pointerListCount; i++ ) {
delegate.activePointersLists.pop(); delegate.activePointersLists.pop();
} }
delegate.sentDragEvent = false;
} }
/** /**
@ -1463,7 +1469,7 @@
tracker.element, tracker.element,
event, event,
delegate[ event ], delegate[ event ],
false event === $.MouseTracker.wheelEventName ? { passive: false, capture: false } : false
); );
} }
@ -2816,10 +2822,7 @@
// If child element relinquishes capture to a parent we may get here // If child element relinquishes capture to a parent we may get here
// from a pointerleave event while a pointerup event will never be received. // from a pointerleave event while a pointerup event will never be received.
// In that case, we'll clean up the contact count // In that case, we'll clean up the contact count
if ( (pointsList.type === 'mouse' || pointsList.type === 'pen') &&
pointsList.contacts > 0 ) {
pointsList.removeContact(); pointsList.removeContact();
}
listLength = pointsList.removeById( gPoint.id ); listLength = pointsList.removeById( gPoint.id );
} else { } else {
@ -2838,7 +2841,7 @@
function getEventProcessDefaults( tracker, eventInfo ) { function getEventProcessDefaults( tracker, eventInfo ) {
switch ( eventInfo.eventType ) { switch ( eventInfo.eventType ) {
case 'pointermove': case 'pointermove':
eventInfo.isStopable = true; eventInfo.isStoppable = true;
eventInfo.isCancelable = true; eventInfo.isCancelable = true;
eventInfo.preventDefault = false; eventInfo.preventDefault = false;
eventInfo.preventGesture = !tracker.hasGestureHandlers; eventInfo.preventGesture = !tracker.hasGestureHandlers;
@ -2850,28 +2853,28 @@
case 'keydown': case 'keydown':
case 'keyup': case 'keyup':
case 'keypress': case 'keypress':
eventInfo.isStopable = true; eventInfo.isStoppable = true;
eventInfo.isCancelable = true; eventInfo.isCancelable = true;
eventInfo.preventDefault = false; // onContextMenu(), onKeyDown(), onKeyUp(), onKeyPress() may set true eventInfo.preventDefault = false; // onContextMenu(), onKeyDown(), onKeyUp(), onKeyPress() may set true
eventInfo.preventGesture = false; eventInfo.preventGesture = false;
eventInfo.stopPropagation = false; eventInfo.stopPropagation = false;
break; break;
case 'pointerdown': case 'pointerdown':
eventInfo.isStopable = true; eventInfo.isStoppable = true;
eventInfo.isCancelable = true; eventInfo.isCancelable = true;
eventInfo.preventDefault = false; // updatePointerDown() may set true (tracker.hasGestureHandlers) eventInfo.preventDefault = false; // updatePointerDown() may set true (tracker.hasGestureHandlers)
eventInfo.preventGesture = !tracker.hasGestureHandlers; eventInfo.preventGesture = !tracker.hasGestureHandlers;
eventInfo.stopPropagation = false; eventInfo.stopPropagation = false;
break; break;
case 'pointerup': case 'pointerup':
eventInfo.isStopable = true; eventInfo.isStoppable = true;
eventInfo.isCancelable = true; eventInfo.isCancelable = true;
eventInfo.preventDefault = false; eventInfo.preventDefault = false;
eventInfo.preventGesture = !tracker.hasGestureHandlers; eventInfo.preventGesture = !tracker.hasGestureHandlers;
eventInfo.stopPropagation = false; eventInfo.stopPropagation = false;
break; break;
case 'wheel': case 'wheel':
eventInfo.isStopable = true; eventInfo.isStoppable = true;
eventInfo.isCancelable = true; eventInfo.isCancelable = true;
eventInfo.preventDefault = false; // handleWheelEvent() may set true eventInfo.preventDefault = false; // handleWheelEvent() may set true
eventInfo.preventGesture = !tracker.hasScrollHandler; eventInfo.preventGesture = !tracker.hasScrollHandler;
@ -2880,21 +2883,21 @@
case 'gotpointercapture': case 'gotpointercapture':
case 'lostpointercapture': case 'lostpointercapture':
case 'pointercancel': case 'pointercancel':
eventInfo.isStopable = true; eventInfo.isStoppable = true;
eventInfo.isCancelable = false; eventInfo.isCancelable = false;
eventInfo.preventDefault = false; eventInfo.preventDefault = false;
eventInfo.preventGesture = false; eventInfo.preventGesture = false;
eventInfo.stopPropagation = false; eventInfo.stopPropagation = false;
break; break;
case 'click': case 'click':
eventInfo.isStopable = true; eventInfo.isStoppable = true;
eventInfo.isCancelable = true; eventInfo.isCancelable = true;
eventInfo.preventDefault = !!tracker.clickHandler; eventInfo.preventDefault = !!tracker.clickHandler;
eventInfo.preventGesture = false; eventInfo.preventGesture = false;
eventInfo.stopPropagation = false; eventInfo.stopPropagation = false;
break; break;
case 'dblclick': case 'dblclick':
eventInfo.isStopable = true; eventInfo.isStoppable = true;
eventInfo.isCancelable = true; eventInfo.isCancelable = true;
eventInfo.preventDefault = !!tracker.dblClickHandler; eventInfo.preventDefault = !!tracker.dblClickHandler;
eventInfo.preventGesture = false; eventInfo.preventGesture = false;
@ -2905,7 +2908,7 @@
case 'pointerenter': case 'pointerenter':
case 'pointerleave': case 'pointerleave':
default: default:
eventInfo.isStopable = false; eventInfo.isStoppable = false;
eventInfo.isCancelable = false; eventInfo.isCancelable = false;
eventInfo.preventDefault = false; eventInfo.preventDefault = false;
eventInfo.preventGesture = false; eventInfo.preventGesture = false;
@ -3272,6 +3275,7 @@
//updateGPoint.captured = true; // Handled by updatePointerCaptured() //updateGPoint.captured = true; // Handled by updatePointerCaptured()
updateGPoint.insideElementPressed = true; updateGPoint.insideElementPressed = true;
updateGPoint.insideElement = true; updateGPoint.insideElement = true;
updateGPoint.originalTarget = eventInfo.originalEvent.target;
updateGPoint.contactPos = gPoint.currentPos; updateGPoint.contactPos = gPoint.currentPos;
updateGPoint.contactTime = gPoint.currentTime; updateGPoint.contactTime = gPoint.currentTime;
updateGPoint.lastPos = updateGPoint.currentPos; updateGPoint.lastPos = updateGPoint.currentPos;
@ -3282,12 +3286,12 @@
gPoint = updateGPoint; gPoint = updateGPoint;
} else { } else {
// Initialize for tracking and add to the tracking list (no pointerenter event occurred before this) // Initialize for tracking and add to the tracking list (no pointerenter event occurred before this)
$.console.warn('pointerdown event on untracked pointer'); // NOTE: pointerdown event on untracked pointer
gPoint.captured = false; // Handled by updatePointerCaptured() gPoint.captured = false; // Handled by updatePointerCaptured()
gPoint.insideElementPressed = true; gPoint.insideElementPressed = true;
gPoint.insideElement = true; gPoint.insideElement = true;
gPoint.originalTarget = eventInfo.originalEvent.target;
startTrackingPointer( pointsList, gPoint ); startTrackingPointer( pointsList, gPoint );
return;
} }
pointsList.addContact(); pointsList.addContact();
@ -3431,8 +3435,8 @@
releasePoint = updateGPoint.currentPos; releasePoint = updateGPoint.currentPos;
releaseTime = updateGPoint.currentTime; releaseTime = updateGPoint.currentTime;
} else { } else {
// should never get here...we'll start to track pointer anyway // NOTE: updatePointerUp(): pointerup on untracked gPoint
$.console.warn('updatePointerUp(): pointerup on untracked gPoint'); // ...we'll start to track pointer again
gPoint.captured = false; // Handled by updatePointerCaptured() gPoint.captured = false; // Handled by updatePointerCaptured()
gPoint.insideElementPressed = false; gPoint.insideElementPressed = false;
gPoint.insideElement = true; gPoint.insideElement = true;
@ -3455,7 +3459,7 @@
if ( pointsList.contacts === 0 ) { if ( pointsList.contacts === 0 ) {
// Release (pressed in our element) // Release (pressed in our element)
if ( tracker.releaseHandler ) { if ( tracker.releaseHandler && releasePoint ) {
tracker.releaseHandler( tracker.releaseHandler(
{ {
eventSource: tracker, eventSource: tracker,
@ -3472,7 +3476,7 @@
} }
// Drag End // Drag End
if ( tracker.dragEndHandler ) { if ( tracker.dragEndHandler && delegate.sentDragEvent ) {
tracker.dragEndHandler( tracker.dragEndHandler(
{ {
eventSource: tracker, eventSource: tracker,
@ -3488,6 +3492,9 @@
); );
} }
// We want to clear this flag regardless of whether we fired the dragEndHandler
delegate.sentDragEvent = false;
// Click / Double-Click // Click / Double-Click
if ( ( tracker.clickHandler || tracker.dblClickHandler ) && updateGPoint.insideElement ) { if ( ( tracker.clickHandler || tracker.dblClickHandler ) && updateGPoint.insideElement ) {
quick = releaseTime - updateGPoint.contactTime <= tracker.clickTimeThreshold && quick = releaseTime - updateGPoint.contactTime <= tracker.clickTimeThreshold &&
@ -3504,6 +3511,7 @@
shift: eventInfo.originalEvent.shiftKey, shift: eventInfo.originalEvent.shiftKey,
isTouchEvent: updateGPoint.type === 'touch', isTouchEvent: updateGPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
originalTarget: updateGPoint.originalTarget,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3553,7 +3561,7 @@
eventInfo.shouldReleaseCapture = false; eventInfo.shouldReleaseCapture = false;
// Release (pressed in another element) // Release (pressed in another element)
if ( tracker.releaseHandler ) { if ( tracker.releaseHandler && releasePoint ) {
tracker.releaseHandler( tracker.releaseHandler(
{ {
eventSource: tracker, eventSource: tracker,
@ -3674,6 +3682,7 @@
} }
); );
eventInfo.preventDefault = true; eventInfo.preventDefault = true;
delegate.sentDragEvent = true;
} }
} else if ( pointsList.contacts === 2 ) { } else if ( pointsList.contacts === 2 ) {
// Move (2 contacts, use center) // Move (2 contacts, use center)

47
src/navigator.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Navigator * OpenSeadragon - Navigator
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -45,7 +45,9 @@
* @memberof OpenSeadragon * @memberof OpenSeadragon
* @extends OpenSeadragon.Viewer * @extends OpenSeadragon.Viewer
* @extends OpenSeadragon.EventSource * @extends OpenSeadragon.EventSource
* @param {Object} options * @param {Object} options - Navigator options
* @param {Element} [options.element] - An element to use for the navigator.
* @param {String} [options.id] - Id of the element to use for the navigator. However, this is ignored if {@link options.element} is provided.
*/ */
$.Navigator = function( options ){ $.Navigator = function( options ){
@ -55,8 +57,31 @@ $.Navigator = function( options ){
navigatorSize; navigatorSize;
//We may need to create a new element and id if they did not //We may need to create a new element and id if they did not
//provide the id for the existing element //provide the id for the existing element or the element itself
if( !options.id ){ if( options.element || options.id ){
if ( options.element ) {
if ( options.id ){
$.console.warn("Given option.id for Navigator was ignored since option.element was provided and is being used instead.");
}
// Don't overwrite the element's id if it has one already
if ( options.element.id ) {
options.id = options.element.id;
} else {
options.id = 'navigator-' + $.now();
}
this.element = options.element;
} else {
this.element = document.getElementById( options.id );
}
options.controlOptions = {
anchor: $.ControlAnchor.NONE,
attachToViewer: false,
autoFade: false
};
} else {
options.id = 'navigator-' + $.now(); options.id = 'navigator-' + $.now();
this.element = $.makeNeutralElement( "div" ); this.element = $.makeNeutralElement( "div" );
options.controlOptions = { options.controlOptions = {
@ -82,14 +107,6 @@ $.Navigator = function( options ){
options.controlOptions.width = options.width; options.controlOptions.width = options.width;
} }
} }
} else {
this.element = document.getElementById( options.id );
options.controlOptions = {
anchor: $.ControlAnchor.NONE,
attachToViewer: false,
autoFade: false
};
} }
this.element.id = options.id; this.element.id = options.id;
this.element.className += ' navigator'; this.element.className += ' navigator';
@ -107,8 +124,9 @@ $.Navigator = function( options ){
showSequenceControl: false, showSequenceControl: false,
immediateRender: true, immediateRender: true,
blendTime: 0, blendTime: 0,
animationTime: 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 // prevent resizing the navigator from adding unwanted space around the image
minZoomImageRatio: 1.0, minZoomImageRatio: 1.0,
background: options.background, background: options.background,
@ -166,6 +184,7 @@ $.Navigator = function( options ){
style.styleFloat = 'left'; //IE style.styleFloat = 'left'; //IE
style.zIndex = 999999999; style.zIndex = 999999999;
style.cursor = 'default'; style.cursor = 'default';
style.boxSizing = 'content-box';
}( this.displayRegion.style, this.borderWidth )); }( this.displayRegion.style, this.borderWidth ));
$.setElementPointerEventsNone( this.displayRegion ); $.setElementPointerEventsNone( this.displayRegion );
$.setElementTouchActionNone( this.displayRegion ); $.setElementTouchActionNone( this.displayRegion );

143
src/openseadragon.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon * OpenSeadragon
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -60,7 +60,7 @@
/* /*
* Portions of this source file taken from mattsnider.com: * Portions of this source file taken from mattsnider.com:
* *
* Copyright (c) 2006-2013 Matt Snider * Copyright (c) 2006-2022 Matt Snider
* *
* Permission is hereby granted, free of charge, to any person obtaining a * Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"), * copy of this software and associated documentation files (the "Software"),
@ -163,6 +163,10 @@
* The colors of grids in debug mode. Each tiled image's grid uses a consecutive color. * The colors of grids in debug mode. Each tiled image's grid uses a consecutive color.
* If there are more tiled images than provided colors, the color vector is recycled. * If there are more tiled images than provided colors, the color vector is recycled.
* *
* @property {Boolean} [silenceMultiImageWarnings=false]
* Silences warnings when calling viewport coordinate functions with multi-image.
* Useful when you're overlaying multiple images on top of one another.
*
* @property {Number} [blendTime=0] * @property {Number} [blendTime=0]
* Specifies the duration of animation as higher or lower level tiles are * Specifies the duration of animation as higher or lower level tiles are
* replacing the existing tile. * replacing the existing tile.
@ -209,6 +213,17 @@
* You can pass a CSS color value like "#FF8800". * You can pass a CSS color value like "#FF8800".
* When passing a function the tiledImage and canvas context are available as argument which is useful when you draw a gradient or pattern. * When passing a function the tiledImage and canvas context are available as argument which is useful when you draw a gradient or pattern.
* *
* @property {Object} [subPixelRoundingForTransparency=null]
* Determines when subpixel rounding should be applied for tiles when rendering images that support transparency.
* This property is a subpixel rounding enum values dictionary [{@link BROWSERS}] --> {@link SUBPIXEL_ROUNDING_OCCURRENCES}.
* The key is a {@link BROWSERS} value, and the value is one of {@link SUBPIXEL_ROUNDING_OCCURRENCES},
* indicating, for a given browser, when to apply subpixel rounding.
* Key '*' is the fallback value for any browser not specified in the dictionary.
* This property has a simple mode, and one can set it directly to
* {@link SUBPIXEL_ROUNDING_OCCURRENCES.NEVER}, {@link SUBPIXEL_ROUNDING_OCCURRENCES.ONLY_AT_REST} or {@link SUBPIXEL_ROUNDING_OCCURRENCES.ALWAYS}
* in order to apply this rule for all browser. The values {@link SUBPIXEL_ROUNDING_OCCURRENCES.ALWAYS} would be equivalent to { '*', SUBPIXEL_ROUNDING_OCCURRENCES.ALWAYS }.
* The default is {@link SUBPIXEL_ROUNDING_OCCURRENCES.NEVER} for all browsers, for backward compatibility reason.
*
* @property {Number} [degrees=0] * @property {Number} [degrees=0]
* Initial rotation. * Initial rotation.
* *
@ -317,7 +332,7 @@
* *
* @property {Number} [animationTime=1.2] * @property {Number} [animationTime=1.2]
* Specifies the animation duration per each {@link OpenSeadragon.Spring} * Specifies the animation duration per each {@link OpenSeadragon.Spring}
* which occur when the image is dragged or zoomed. * which occur when the image is dragged, zoomed or rotated.
* *
* @property {OpenSeadragon.GestureSettings} [gestureSettingsMouse] * @property {OpenSeadragon.GestureSettings} [gestureSettingsMouse]
* Settings for gestures generated by a mouse pointer device. (See {@link OpenSeadragon.GestureSettings}) * Settings for gestures generated by a mouse pointer device. (See {@link OpenSeadragon.GestureSettings})
@ -326,6 +341,9 @@
* @property {Boolean} [gestureSettingsMouse.clickToZoom=true] - Zoom on click gesture * @property {Boolean} [gestureSettingsMouse.clickToZoom=true] - Zoom on click gesture
* @property {Boolean} [gestureSettingsMouse.dblClickToZoom=false] - Zoom on double-click gesture. Note: If set to true * @property {Boolean} [gestureSettingsMouse.dblClickToZoom=false] - Zoom on double-click gesture. Note: If set to true
* then clickToZoom should be set to false to prevent multiple zooms. * then clickToZoom should be set to false to prevent multiple zooms.
* @property {Boolean} [gestureSettingsMouse.dblClickDragToZoom=false] - Zoom on dragging through
* double-click gesture ( single click and next click to drag). Note: If set to true
* then clickToZoom should be set to false to prevent multiple zooms.
* @property {Boolean} [gestureSettingsMouse.pinchToZoom=false] - Zoom on pinch gesture * @property {Boolean} [gestureSettingsMouse.pinchToZoom=false] - Zoom on pinch gesture
* @property {Boolean} [gestureSettingsMouse.zoomToRefPoint=true] - If zoomToRefPoint is true, the zoom is centered at the pointer position. Otherwise, * @property {Boolean} [gestureSettingsMouse.zoomToRefPoint=true] - If zoomToRefPoint is true, the zoom is centered at the pointer position. Otherwise,
* the zoom is centered at the canvas center. * the zoom is centered at the canvas center.
@ -336,11 +354,15 @@
* *
* @property {OpenSeadragon.GestureSettings} [gestureSettingsTouch] * @property {OpenSeadragon.GestureSettings} [gestureSettingsTouch]
* Settings for gestures generated by a touch pointer device. (See {@link OpenSeadragon.GestureSettings}) * Settings for gestures generated by a touch pointer device. (See {@link OpenSeadragon.GestureSettings})
* @property {Boolean} [gestureSettingsMouse.dragToPan=true] - Pan on drag gesture * @property {Boolean} [gestureSettingsTouch.dragToPan=true] - Pan on drag gesture
* @property {Boolean} [gestureSettingsTouch.scrollToZoom=false] - Zoom on scroll gesture * @property {Boolean} [gestureSettingsTouch.scrollToZoom=false] - Zoom on scroll gesture
* @property {Boolean} [gestureSettingsTouch.clickToZoom=false] - Zoom on click gesture * @property {Boolean} [gestureSettingsTouch.clickToZoom=false] - Zoom on click gesture
* @property {Boolean} [gestureSettingsTouch.dblClickToZoom=true] - Zoom on double-click gesture. Note: If set to true * @property {Boolean} [gestureSettingsTouch.dblClickToZoom=true] - Zoom on double-click gesture. Note: If set to true
* then clickToZoom should be set to false to prevent multiple zooms. * then clickToZoom should be set to false to prevent multiple zooms.
* @property {Boolean} [gestureSettingsTouch.dblClickDragToZoom=true] - Zoom on dragging through
* double-click gesture ( single click and next click to drag). Note: If set to true
* then clickToZoom should be set to false to prevent multiple zooms.
* @property {Boolean} [gestureSettingsTouch.pinchToZoom=true] - Zoom on pinch gesture * @property {Boolean} [gestureSettingsTouch.pinchToZoom=true] - Zoom on pinch gesture
* @property {Boolean} [gestureSettingsTouch.zoomToRefPoint=true] - If zoomToRefPoint is true, the zoom is centered at the pointer position. Otherwise, * @property {Boolean} [gestureSettingsTouch.zoomToRefPoint=true] - If zoomToRefPoint is true, the zoom is centered at the pointer position. Otherwise,
* the zoom is centered at the canvas center. * the zoom is centered at the canvas center.
@ -351,7 +373,7 @@
* *
* @property {OpenSeadragon.GestureSettings} [gestureSettingsPen] * @property {OpenSeadragon.GestureSettings} [gestureSettingsPen]
* Settings for gestures generated by a pen pointer device. (See {@link OpenSeadragon.GestureSettings}) * Settings for gestures generated by a pen pointer device. (See {@link OpenSeadragon.GestureSettings})
* @property {Boolean} [gestureSettingsMouse.dragToPan=true] - Pan on drag gesture * @property {Boolean} [gestureSettingsPen.dragToPan=true] - Pan on drag gesture
* @property {Boolean} [gestureSettingsPen.scrollToZoom=false] - Zoom on scroll gesture * @property {Boolean} [gestureSettingsPen.scrollToZoom=false] - Zoom on scroll gesture
* @property {Boolean} [gestureSettingsPen.clickToZoom=true] - Zoom on click gesture * @property {Boolean} [gestureSettingsPen.clickToZoom=true] - Zoom on click gesture
* @property {Boolean} [gestureSettingsPen.dblClickToZoom=false] - Zoom on double-click gesture. Note: If set to true * @property {Boolean} [gestureSettingsPen.dblClickToZoom=false] - Zoom on double-click gesture. Note: If set to true
@ -366,11 +388,14 @@
* *
* @property {OpenSeadragon.GestureSettings} [gestureSettingsUnknown] * @property {OpenSeadragon.GestureSettings} [gestureSettingsUnknown]
* Settings for gestures generated by unknown pointer devices. (See {@link OpenSeadragon.GestureSettings}) * Settings for gestures generated by unknown pointer devices. (See {@link OpenSeadragon.GestureSettings})
* @property {Boolean} [gestureSettingsMouse.dragToPan=true] - Pan on drag gesture * @property {Boolean} [gestureSettingsUnknown.dragToPan=true] - Pan on drag gesture
* @property {Boolean} [gestureSettingsUnknown.scrollToZoom=true] - Zoom on scroll gesture * @property {Boolean} [gestureSettingsUnknown.scrollToZoom=true] - Zoom on scroll gesture
* @property {Boolean} [gestureSettingsUnknown.clickToZoom=false] - Zoom on click gesture * @property {Boolean} [gestureSettingsUnknown.clickToZoom=false] - Zoom on click gesture
* @property {Boolean} [gestureSettingsUnknown.dblClickToZoom=true] - Zoom on double-click gesture. Note: If set to true * @property {Boolean} [gestureSettingsUnknown.dblClickToZoom=true] - Zoom on double-click gesture. Note: If set to true
* then clickToZoom should be set to false to prevent multiple zooms. * then clickToZoom should be set to false to prevent multiple zooms.
* @property {Boolean} [gestureSettingsUnknown.dblClickDragToZoom=false] - Zoom on dragging through
* double-click gesture ( single click and next click to drag). Note: If set to true
* then clickToZoom should be set to false to prevent multiple zooms.
* @property {Boolean} [gestureSettingsUnknown.pinchToZoom=true] - Zoom on pinch gesture * @property {Boolean} [gestureSettingsUnknown.pinchToZoom=true] - Zoom on pinch gesture
* @property {Boolean} [gestureSettingsUnknown.zoomToRefPoint=true] - If zoomToRefPoint is true, the zoom is centered at the pointer position. Otherwise, * @property {Boolean} [gestureSettingsUnknown.zoomToRefPoint=true] - If zoomToRefPoint is true, the zoom is centered at the pointer position. Otherwise,
* the zoom is centered at the canvas center. * the zoom is centered at the canvas center.
@ -385,6 +410,9 @@
* @property {Number} [zoomPerScroll=1.2] * @property {Number} [zoomPerScroll=1.2]
* The "zoom distance" per mouse scroll or touch pinch. <em><strong>Note:</strong> Setting this to 1.0 effectively disables the mouse-wheel zoom feature (also see gestureSettings[Mouse|Touch|Pen].scrollToZoom}).</em> * The "zoom distance" per mouse scroll or touch pinch. <em><strong>Note:</strong> Setting this to 1.0 effectively disables the mouse-wheel zoom feature (also see gestureSettings[Mouse|Touch|Pen].scrollToZoom}).</em>
* *
* @property {Number} [zoomPerDblClickDrag=1.2]
* The "zoom distance" per double-click mouse drag. <em><strong>Note:</strong> Setting this to 1.0 effectively disables the double-click-drag-to-Zoom feature (also see gestureSettings[Mouse|Touch|Pen].dblClickDragToZoom).</em>
*
* @property {Number} [zoomPerSecond=1.0] * @property {Number} [zoomPerSecond=1.0]
* Sets the zoom amount per second when zoomIn/zoomOut buttons are pressed and held. * Sets the zoom amount per second when zoomIn/zoomOut buttons are pressed and held.
* The value is a factor of the current zoom, so 1.0 (the default) disables zooming when the zoomIn/zoomOut buttons * The value is a factor of the current zoom, so 1.0 (the default) disables zooming when the zoomIn/zoomOut buttons
@ -395,6 +423,11 @@
* @property {Boolean} [showNavigator=false] * @property {Boolean} [showNavigator=false]
* Set to true to make the navigator minimap appear. * Set to true to make the navigator minimap appear.
* *
* @property {Element} [navigatorElement=null]
* The element to hold the navigator minimap.
* If an element is specified, the Id option (see navigatorId) is ignored.
* If no element nor ID is specified, a div element will be generated accordingly.
*
* @property {String} [navigatorId=navigator-GENERATED DATE] * @property {String} [navigatorId=navigator-GENERATED DATE]
* The ID of a div to hold the navigator minimap. * The ID of a div to hold the navigator minimap.
* If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, navigator[Top|Left|Height|Width] and navigatorAutoFade options will be ignored. * If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, navigator[Top|Left|Height|Width] and navigatorAutoFade options will be ignored.
@ -462,6 +495,12 @@
* @property {Number} [timeout=30000] * @property {Number} [timeout=30000]
* The max number of milliseconds that an image job may take to complete. * 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] * @property {Boolean} [useCanvas=true]
* Set to false to not use an HTML canvas element for image rendering even if canvas is supported. * Set to false to not use an HTML canvas element for image rendering even if canvas is supported.
* *
@ -648,6 +687,20 @@
* @property {Object} [ajaxHeaders={}] * @property {Object} [ajaxHeaders={}]
* A set of headers to include when making AJAX requests for tile sources or tiles. * A set of headers to include when making AJAX requests for tile sources or tiles.
* *
* @property {Boolean} [splitHashDataForPost=false]
* Allows to treat _first_ hash ('#') symbol as a separator for POST data:
* URL to be opened by a {@link OpenSeadragon.TileSource} can thus look like: http://some.url#postdata=here.
* The whole URL is used to fetch image info metadata and it is then split to 'http://some.url' and
* 'postdata=here'; post data is given to the {@link OpenSeadragon.TileSource} of the choice and can be further
* used within tile requests (see TileSource methods).
* NOTE: {@link OpenSeadragon.TileSource.prototype.configure} return value should contain the post data
* if you want to use it later - so that it is given to your constructor later.
* NOTE: usually, post data is expected to be ampersand-separated (just like GET parameters), and is NOT USED
* to fetch tile image data unless explicitly programmed, or if loadTilesWithAjax=false 4
* (but it is still used for the initial image info request).
* NOTE: passing POST data from URL by this feature only supports string values, however,
* TileSource can send any data using POST as long as the header is correct
* (@see OpenSeadragon.TileSource.prototype.getTilePostData)
*/ */
/** /**
@ -783,6 +836,8 @@ function OpenSeadragon( options ){
'[object Number]': 'number', '[object Number]': 'number',
'[object String]': 'string', '[object String]': 'string',
'[object Function]': 'function', '[object Function]': 'function',
'[object AsyncFunction]': 'function',
'[object Promise]': 'promise',
'[object Array]': 'array', '[object Array]': 'array',
'[object Date]': 'date', '[object Date]': 'date',
'[object RegExp]': 'regexp', '[object RegExp]': 'regexp',
@ -802,7 +857,6 @@ function OpenSeadragon( options ){
return $.type(obj) === "function"; return $.type(obj) === "function";
}; };
/** /**
* Taken from jQuery 1.6.1 * Taken from jQuery 1.6.1
* @function isArray * @function isArray
@ -888,7 +942,7 @@ function OpenSeadragon( options ){
/** /**
* Shim around Object.freeze. Does nothing if Object.freeze is not supported. * Shim around Object.freeze. Does nothing if Object.freeze is not supported.
* @param {Object} obj The object to freeze. * @param {Object} obj The object to freeze.
* @return {Object} obj The frozen object. * @returns {Object} obj The frozen object.
*/ */
$.freezeObject = function(obj) { $.freezeObject = function(obj) {
if (Object.freeze) { if (Object.freeze) {
@ -1067,8 +1121,19 @@ function OpenSeadragon( options ){
if ( options !== null || options !== undefined ) { if ( options !== null || options !== undefined ) {
// Extend the base object // Extend the base object
for ( name in options ) { for ( name in options ) {
src = target[ name ]; var descriptor = Object.getOwnPropertyDescriptor(options, name);
copy = options[ name ];
if (descriptor !== undefined) {
if (descriptor.get || descriptor.set) {
Object.defineProperty(target, name, descriptor);
continue;
}
copy = descriptor.value;
} else {
$.console.warn('Could not copy inherited property "' + name + '".');
continue;
}
// Prevent never-ending loop // Prevent never-ending loop
if ( target === copy ) { if ( target === copy ) {
@ -1077,6 +1142,8 @@ function OpenSeadragon( options ){
// Recurse if we're merging plain objects or arrays // Recurse if we're merging plain objects or arrays
if ( deep && copy && ( OpenSeadragon.isPlainObject( copy ) || ( copyIsArray = OpenSeadragon.isArray( copy ) ) ) ) { if ( deep && copy && ( OpenSeadragon.isPlainObject( copy ) || ( copyIsArray = OpenSeadragon.isArray( copy ) ) ) ) {
src = target[ name ];
if ( copyIsArray ) { if ( copyIsArray ) {
copyIsArray = false; copyIsArray = false;
clone = src && OpenSeadragon.isArray( src ) ? src : []; clone = src && OpenSeadragon.isArray( src ) ? src : [];
@ -1129,6 +1196,7 @@ function OpenSeadragon( options ){
ajaxWithCredentials: false, ajaxWithCredentials: false,
loadTilesWithAjax: false, loadTilesWithAjax: false,
ajaxHeaders: {}, ajaxHeaders: {},
splitHashDataForPost: false,
//PAN AND ZOOM SETTINGS AND CONSTRAINTS //PAN AND ZOOM SETTINGS AND CONSTRAINTS
panHorizontal: true, panHorizontal: true,
@ -1155,6 +1223,7 @@ function OpenSeadragon( options ){
scrollToZoom: true, scrollToZoom: true,
clickToZoom: true, clickToZoom: true,
dblClickToZoom: false, dblClickToZoom: false,
dblClickDragToZoom: false,
pinchToZoom: false, pinchToZoom: false,
zoomToRefPoint: true, zoomToRefPoint: true,
flickEnabled: false, flickEnabled: false,
@ -1167,6 +1236,7 @@ function OpenSeadragon( options ){
scrollToZoom: false, scrollToZoom: false,
clickToZoom: false, clickToZoom: false,
dblClickToZoom: true, dblClickToZoom: true,
dblClickDragToZoom: true,
pinchToZoom: true, pinchToZoom: true,
zoomToRefPoint: true, zoomToRefPoint: true,
flickEnabled: true, flickEnabled: true,
@ -1179,6 +1249,7 @@ function OpenSeadragon( options ){
scrollToZoom: false, scrollToZoom: false,
clickToZoom: true, clickToZoom: true,
dblClickToZoom: false, dblClickToZoom: false,
dblClickDragToZoom: false,
pinchToZoom: false, pinchToZoom: false,
zoomToRefPoint: true, zoomToRefPoint: true,
flickEnabled: false, flickEnabled: false,
@ -1191,6 +1262,7 @@ function OpenSeadragon( options ){
scrollToZoom: false, scrollToZoom: false,
clickToZoom: false, clickToZoom: false,
dblClickToZoom: true, dblClickToZoom: true,
dblClickDragToZoom: false,
pinchToZoom: true, pinchToZoom: true,
zoomToRefPoint: true, zoomToRefPoint: true,
flickEnabled: true, flickEnabled: true,
@ -1200,6 +1272,7 @@ function OpenSeadragon( options ){
}, },
zoomPerClick: 2, zoomPerClick: 2,
zoomPerScroll: 1.2, zoomPerScroll: 1.2,
zoomPerDblClickDrag: 1.2,
zoomPerSecond: 1.0, zoomPerSecond: 1.0,
blendTime: 0, blendTime: 0,
alwaysBlend: false, alwaysBlend: false,
@ -1235,6 +1308,7 @@ function OpenSeadragon( options ){
//VIEWPORT NAVIGATOR SETTINGS //VIEWPORT NAVIGATOR SETTINGS
showNavigator: false, showNavigator: false,
navigatorElement: null,
navigatorId: null, navigatorId: null,
navigatorPosition: null, navigatorPosition: null,
navigatorSizeRatio: 0.2, navigatorSizeRatio: 0.2,
@ -1263,6 +1337,7 @@ function OpenSeadragon( options ){
compositeOperation: null, compositeOperation: null,
imageSmoothingEnabled: true, imageSmoothingEnabled: true,
placeholderFillStyle: null, placeholderFillStyle: null,
subPixelRoundingForTransparency: null,
//REFERENCE STRIP SETTINGS //REFERENCE STRIP SETTINGS
showReferenceStrip: false, showReferenceStrip: false,
@ -1286,6 +1361,8 @@ function OpenSeadragon( options ){
maxImageCacheCount: 200, maxImageCacheCount: 200,
timeout: 30000, timeout: 30000,
useCanvas: true, // Use canvas element for drawing if available useCanvas: true, // Use canvas element for drawing if available
tileRetryMax: 0,
tileRetryDelay: 2500,
//INTERFACE RESOURCE SETTINGS //INTERFACE RESOURCE SETTINGS
prefixUrl: "/images/", prefixUrl: "/images/",
@ -1348,7 +1425,9 @@ function OpenSeadragon( options ){
//DEVELOPER SETTINGS //DEVELOPER SETTINGS
debugMode: false, debugMode: false,
debugGridColor: ['#437AB2', '#1B9E77', '#D95F02', '#7570B3', '#E7298A', '#66A61E', '#E6AB02', '#A6761D', '#666666'] debugGridColor: ['#437AB2', '#1B9E77', '#D95F02', '#7570B3', '#E7298A', '#66A61E', '#E6AB02', '#A6761D', '#666666'],
silenceMultiImageWarnings: false
}, },
@ -1403,6 +1482,20 @@ function OpenSeadragon( options ){
CHROMEEDGE: 7 CHROMEEDGE: 7
}, },
/**
* An enumeration of when subpixel rounding should occur.
* @static
* @type {Object}
* @property {Number} NEVER Never apply subpixel rounding for transparency.
* @property {Number} ONLY_AT_REST Do not apply subpixel rounding for transparency during animation (panning, zoom, rotation) and apply it once animation is over.
* @property {Number} ALWAYS Apply subpixel rounding for transparency during animation and when animation is over.
*/
SUBPIXEL_ROUNDING_OCCURRENCES: {
NEVER: 0,
ONLY_AT_REST: 1,
ALWAYS: 2
},
/** /**
* Keep track of which {@link Viewer}s have been created. * Keep track of which {@link Viewer}s have been created.
* - Key: {@link Element} to which a Viewer is attached. * - Key: {@link Element} to which a Viewer is attached.
@ -1587,8 +1680,8 @@ function OpenSeadragon( options ){
/** /**
* Compute the modulo of a number but makes sure to always return * Compute the modulo of a number but makes sure to always return
* a positive value. * a positive value (also known as Euclidean modulo).
* @param {Number} number the number to computes the modulo of * @param {Number} number the number to compute the modulo of
* @param {Number} modulo the modulo * @param {Number} modulo the modulo
* @returns {Number} the result of the modulo of number * @returns {Number} the result of the modulo of number
*/ */
@ -1600,6 +1693,7 @@ function OpenSeadragon( options ){
return result; return result;
}, },
/** /**
* Determines if a point is within the bounding rectangle of the given element (hit-test). * Determines if a point is within the bounding rectangle of the given element (hit-test).
* @function * @function
@ -1939,7 +2033,7 @@ function OpenSeadragon( options ){
*/ */
setElementPointerEvents: function( element, value ) { setElementPointerEvents: function( element, value ) {
element = $.getElement( element ); element = $.getElement( element );
if ( typeof element.style.pointerEvents !== 'undefined' ) { if (typeof element.style !== 'undefined' && typeof element.style.pointerEvents !== 'undefined' ) {
element.style.pointerEvents = value; element.style.pointerEvents = value;
} }
}, },
@ -2048,7 +2142,7 @@ function OpenSeadragon( options ){
* @param {Boolean} [options.capture] * @param {Boolean} [options.capture]
* @param {Boolean} [options.passive] * @param {Boolean} [options.passive]
* @param {Boolean} [options.once] * @param {Boolean} [options.once]
* @return {String} The protocol (http:, https:, file:, ftp: ...) * @returns {String} The protocol (http:, https:, file:, ftp: ...)
*/ */
normalizeEventListenerOptions: function (options) { normalizeEventListenerOptions: function (options) {
var opts; var opts;
@ -2212,7 +2306,7 @@ function OpenSeadragon( options ){
* @function * @function
* @private * @private
* @param {String} url The url to retrieve the protocol from. * @param {String} url The url to retrieve the protocol from.
* @return {String} The protocol (http:, https:, file:, ftp: ...) * @returns {String} The protocol (http:, https:, file:, ftp: ...)
*/ */
getUrlProtocol: function( url ) { getUrlProtocol: function( url ) {
var match = url.match(/^([a-z]+:)\/\//i); var match = url.match(/^([a-z]+:)\/\//i);
@ -2272,7 +2366,9 @@ function OpenSeadragon( options ){
* @param {Function} options.success - a function to call on a successful response * @param {Function} options.success - a function to call on a successful response
* @param {Function} options.error - a function to call on when an error occurs * @param {Function} options.error - a function to call on when an error occurs
* @param {Object} options.headers - headers to add to the AJAX request * @param {Object} options.headers - headers to add to the AJAX request
* @param {String} options.responseType - the response type of the the AJAX request * @param {String} options.responseType - the response type of the AJAX request
* @param {String} options.postData - HTTP POST data (usually but not necessarily in k=v&k2=v2... form,
* see TileSource::getPostData), GET method used if null
* @param {Boolean} [options.withCredentials=false] - whether to set the XHR's withCredentials * @param {Boolean} [options.withCredentials=false] - whether to set the XHR's withCredentials
* @throws {Error} * @throws {Error}
* @returns {XMLHttpRequest} * @returns {XMLHttpRequest}
@ -2281,6 +2377,7 @@ function OpenSeadragon( options ){
var withCredentials; var withCredentials;
var headers; var headers;
var responseType; var responseType;
var postData;
// Note that our preferred API is that you pass in a single object; the named // Note that our preferred API is that you pass in a single object; the named
// arguments are for legacy support. // arguments are for legacy support.
@ -2290,6 +2387,7 @@ function OpenSeadragon( options ){
withCredentials = url.withCredentials; withCredentials = url.withCredentials;
headers = url.headers; headers = url.headers;
responseType = url.responseType || null; responseType = url.responseType || null;
postData = url.postData || null;
url = url.url; url = url.url;
} }
@ -2313,17 +2411,18 @@ function OpenSeadragon( options ){
protocol !== "https:" )) { protocol !== "https:" )) {
onSuccess( request ); onSuccess( request );
} else { } else {
$.console.log( "AJAX request returned %d: %s", request.status, url );
if ( $.isFunction( onError ) ) { if ( $.isFunction( onError ) ) {
onError( request ); onError( request );
} else {
$.console.error( "AJAX request returned %d: %s", request.status, url );
} }
} }
} }
}; };
var method = postData ? "POST" : "GET";
try { try {
request.open( "GET", url, true ); request.open( method, url, true );
if (responseType) { if (responseType) {
request.responseType = responseType; request.responseType = responseType;
@ -2341,9 +2440,9 @@ function OpenSeadragon( options ){
request.withCredentials = true; request.withCredentials = true;
} }
request.send(null); request.send(postData);
} catch (e) { } catch (e) {
$.console.log( "%s while making AJAX request: %s", e.name, e.message ); $.console.error( "%s while making AJAX request: %s", e.name, e.message );
request.onreadystatechange = function(){}; request.onreadystatechange = function(){};

7
src/osmtilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - OsmTileSource * OpenSeadragon - OsmTileSource
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -122,10 +122,11 @@ $.extend( $.OsmTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
* @function * @function
* @param {Object} data - the raw configuration * @param {Object} data - the raw configuration
* @param {String} url - the url the data was retrieved from if any. * @param {String} url - the url the data was retrieved from if any.
* @return {Object} options - A dictionary of keyword arguments sufficient * @param {String} postData - HTTP POST data in k=v&k2=v2... form or null
* @returns {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor. * to configure this tile sources constructor.
*/ */
configure: function( data, url ){ configure: function( data, url, postData ){
return data; return data;
}, },

12
src/overlay.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Overlay * OpenSeadragon - Overlay
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -299,18 +299,18 @@
this.adjust(position, size); this.adjust(position, size);
var rotate = 0; var rotate = 0;
if (viewport.degrees && if (viewport.getRotation(true) &&
this.rotationMode !== $.OverlayRotationMode.NO_ROTATION) { this.rotationMode !== $.OverlayRotationMode.NO_ROTATION) {
// BOUNDING_BOX is only valid if both directions get scaled. // BOUNDING_BOX is only valid if both directions get scaled.
// Get replaced by EXACT otherwise. // Get replaced by EXACT otherwise.
if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX && if (this.rotationMode === $.OverlayRotationMode.BOUNDING_BOX &&
this.width !== null && this.height !== null) { this.width !== null && this.height !== null) {
var rect = new $.Rect(position.x, position.y, size.x, size.y); var rect = new $.Rect(position.x, position.y, size.x, size.y);
var boundingBox = this._getBoundingBox(rect, viewport.degrees); var boundingBox = this._getBoundingBox(rect, viewport.getRotation(true));
position = boundingBox.getTopLeft(); position = boundingBox.getTopLeft();
size = boundingBox.getSize(); size = boundingBox.getSize();
} else { } else {
rotate = viewport.degrees; rotate = viewport.getRotation(true);
} }
} }
@ -447,7 +447,7 @@
// private // private
_adjustBoundsForRotation: function(viewport, bounds) { _adjustBoundsForRotation: function(viewport, bounds) {
if (!viewport || if (!viewport ||
viewport.degrees === 0 || viewport.getRotation(true) === 0 ||
this.rotationMode === $.OverlayRotationMode.EXACT) { this.rotationMode === $.OverlayRotationMode.EXACT) {
return bounds; return bounds;
} }
@ -467,7 +467,7 @@
} }
// NO_ROTATION case // NO_ROTATION case
return bounds.rotate(-viewport.degrees, return bounds.rotate(-viewport.getRotation(true),
this._getPlacementPoint(bounds)); this._getPlacementPoint(bounds));
} }
}; };

2
src/point.js
View File

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

2
src/profiler.js
View File

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

12
src/rectangle.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Rect * OpenSeadragon - Rect
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -230,7 +230,7 @@ $.Rect.prototype = {
* Returns the width and height component as a vector OpenSeadragon.Point * Returns the width and height component as a vector OpenSeadragon.Point
* @function * @function
* @returns {OpenSeadragon.Point} The 2 dimensional vector representing the * @returns {OpenSeadragon.Point} The 2 dimensional vector representing the
* the width and height of the rectangle. * width and height of the rectangle.
*/ */
getSize: function() { getSize: function() {
return new $.Point(this.width, this.height); return new $.Point(this.width, this.height);
@ -240,7 +240,7 @@ $.Rect.prototype = {
* Determines if two Rectangles have equivalent components. * Determines if two Rectangles have equivalent components.
* @function * @function
* @param {OpenSeadragon.Rect} rectangle The Rectangle to compare to. * @param {OpenSeadragon.Rect} rectangle The Rectangle to compare to.
* @return {Boolean} 'true' if all components are equal, otherwise 'false'. * @returns {Boolean} 'true' if all components are equal, otherwise 'false'.
*/ */
equals: function(other) { equals: function(other) {
return (other instanceof $.Rect) && return (other instanceof $.Rect) &&
@ -287,7 +287,7 @@ $.Rect.prototype = {
* Returns the smallest rectangle that will contain this and the given * Returns the smallest rectangle that will contain this and the given
* rectangle bounding boxes. * rectangle bounding boxes.
* @param {OpenSeadragon.Rect} rect * @param {OpenSeadragon.Rect} rect
* @return {OpenSeadragon.Rect} The new rectangle. * @returns {OpenSeadragon.Rect} The new rectangle.
*/ */
union: function(rect) { union: function(rect) {
var thisBoundingBox = this.getBoundingBox(); var thisBoundingBox = this.getBoundingBox();
@ -313,7 +313,7 @@ $.Rect.prototype = {
* Returns the bounding box of the intersection of this rectangle with the * Returns the bounding box of the intersection of this rectangle with the
* given rectangle. * given rectangle.
* @param {OpenSeadragon.Rect} rect * @param {OpenSeadragon.Rect} rect
* @return {OpenSeadragon.Rect} the bounding box of the intersection * @returns {OpenSeadragon.Rect} the bounding box of the intersection
* or null if the rectangles don't intersect. * or null if the rectangles don't intersect.
*/ */
intersection: function(rect) { intersection: function(rect) {
@ -441,7 +441,7 @@ $.Rect.prototype = {
* @param {Number} degrees The angle in degrees to rotate. * @param {Number} degrees The angle in degrees to rotate.
* @param {OpenSeadragon.Point} [pivot] The point about which to rotate. * @param {OpenSeadragon.Point} [pivot] The point about which to rotate.
* Defaults to the center of the rectangle. * Defaults to the center of the rectangle.
* @return {OpenSeadragon.Rect} * @returns {OpenSeadragon.Rect}
*/ */
rotate: function(degrees, pivot) { rotate: function(degrees, pivot) {
degrees = $.positiveModulo(degrees, 360); degrees = $.positiveModulo(degrees, 360);

7
src/referencestrip.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - ReferenceStrip * OpenSeadragon - ReferenceStrip
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -288,7 +288,7 @@ $.ReferenceStrip.prototype = {
*/ */
update: function () { update: function () {
if ( THIS[this.id].animating ) { if ( THIS[this.id].animating ) {
$.console.log( 'image reference strip update' ); // $.console.log( 'image reference strip update' );
return true; return true;
} }
return false; return false;
@ -321,7 +321,8 @@ function onStripClick( event ) {
var page; var page;
if ( 'horizontal' === this.scroll ) { 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 { } else {
page = Math.floor(event.position.y / this.panelHeight); page = Math.floor(event.position.y / this.panelHeight);
} }

2
src/spring.js
View File

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

4
src/strings.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - getString/setString * OpenSeadragon - getString/setString
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -83,7 +83,7 @@ $.extend( $, /** @lends OpenSeadragon */{
string = container[ props[ i ] ]; string = container[ props[ i ] ];
if ( typeof ( string ) !== "string" ) { if ( typeof ( string ) !== "string" ) {
$.console.log( "Untranslated source string:", prop ); $.console.error( "Untranslated source string:", prop );
string = ""; // FIXME: this breaks gettext()-style convention, which would return source string = ""; // FIXME: this breaks gettext()-style convention, which would return source
} }

137
src/tile.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Tile * OpenSeadragon - Tile
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -44,7 +44,7 @@
* coordinates. * coordinates.
* @param {Boolean} exists Is this tile a part of a sparse image? ( Also has * @param {Boolean} exists Is this tile a part of a sparse image? ( Also has
* this tile failed to load? ) * this tile failed to load? )
* @param {String} url The URL of this tile's image. * @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 * @param {CanvasRenderingContext2D} context2D The context2D of this tile if it
* is provided directly by the tile source. * is provided directly by the tile source.
* @param {Boolean} loadWithAjax Whether this tile image should be loaded with an AJAX request . * @param {Boolean} loadWithAjax Whether this tile image should be loaded with an AJAX request .
@ -52,8 +52,11 @@
* @param {OpenSeadragon.Rect} sourceBounds The portion of the tile to use as the source of the * @param {OpenSeadragon.Rect} sourceBounds The portion of the tile to use as the source of the
* drawing operation, in pixels. Note that this only works when drawing with canvas; when drawing * drawing operation, in pixels. Note that this only works when drawing with canvas; when drawing
* with HTML the entire tile is always used. * with HTML the entire tile is always used.
* @param {String} postData HTTP POST data (usually but not necessarily in k=v&k2=v2... form,
* see TileSource::getPostData) or null
* @param {String} cacheKey key to act as a tile cache, must be unique for tiles with unique image data
*/ */
$.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, ajaxHeaders, sourceBounds) { $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, ajaxHeaders, sourceBounds, postData, cacheKey) {
/** /**
* The zoom level this tile belongs to. * The zoom level this tile belongs to.
* @member {Number} level * @member {Number} level
@ -92,11 +95,21 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja
*/ */
this.exists = exists; this.exists = exists;
/** /**
* The URL of this tile's image. * Private property to hold string url or url retriever function.
* @member {String} url * Consumers should access via Tile.getUrl()
* @private
* @member {String|Function} url
* @memberof OpenSeadragon.Tile# * @memberof OpenSeadragon.Tile#
*/ */
this.url = url; this._url = url;
/**
* Post parameters for this tile. For example, it can be an URL-encoded string
* in k1=v1&k2=v2... format, or a JSON, or a FormData instance... or null if no POST request used
* @member {String} postData HTTP POST data (usually but not necessarily in k=v&k2=v2... form,
* see TileSource::getPostData) or null
* @memberof OpenSeadragon.Tile#
*/
this.postData = postData;
/** /**
* The context2D of this tile if it is provided directly by the tile source. * The context2D of this tile if it is provided directly by the tile source.
* @member {CanvasRenderingContext2D} context2D * @member {CanvasRenderingContext2D} context2D
@ -116,16 +129,18 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja
* @memberof OpenSeadragon.Tile# * @memberof OpenSeadragon.Tile#
*/ */
this.ajaxHeaders = ajaxHeaders; this.ajaxHeaders = ajaxHeaders;
if (cacheKey === undefined) {
$.console.warn("Tile constructor needs 'cacheKey' variable: creation tile cache" +
" in Tile class is deprecated. TileSource.prototype.getTileHashKey will be used.");
cacheKey = $.TileSource.prototype.getTileHashKey(level, x, y, url, ajaxHeaders, postData);
}
/** /**
* The unique cache key for this tile. * The unique cache key for this tile.
* @member {String} cacheKey * @member {String} cacheKey
* @memberof OpenSeadragon.Tile# * @memberof OpenSeadragon.Tile#
*/ */
if (this.ajaxHeaders) { this.cacheKey = cacheKey;
this.cacheKey = this.url + "+" + JSON.stringify(this.ajaxHeaders);
} else {
this.cacheKey = this.url;
}
/** /**
* Is this tile loaded? * Is this tile loaded?
* @member {Boolean} loaded * @member {Boolean} loaded
@ -151,12 +166,6 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja
* @memberof OpenSeadragon.Tile# * @memberof OpenSeadragon.Tile#
*/ */
this.imgElement = null; this.imgElement = null;
/**
* The Image object for this tile.
* @member {Object} image
* @memberof OpenSeadragon.Tile#
*/
this.image = null;
/** /**
* The alias of this.element.style. * The alias of this.element.style.
@ -209,6 +218,13 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja
*/ */
this.visibility = null; this.visibility = null;
/**
* The transparency indicator of this tile.
* @member {Boolean} hasTransparency true if tile contains transparency for correct rendering
* @memberof OpenSeadragon.Tile#
*/
this.hasTransparency = false;
/** /**
* Whether this tile is currently being drawn. * Whether this tile is currently being drawn.
* @member {Boolean} beingDrawn * @member {Boolean} beingDrawn
@ -253,7 +269,9 @@ $.Tile.prototype = {
// private // private
_hasTransparencyChannel: function() { _hasTransparencyChannel: function() {
return !!this.context2D || this.url.match('.png'); console.warn("Tile.prototype._hasTransparencyChannel() has been " +
"deprecated and will be removed in the future. Use TileSource.prototype.hasTransparency() instead.");
return !!this.context2D || this.getUrl().match('.png');
}, },
/** /**
@ -281,8 +299,13 @@ $.Tile.prototype = {
// content during animation of the container size. // content during animation of the container size.
if ( !this.element ) { if ( !this.element ) {
var image = this.getImage();
if (!image) {
return;
}
this.element = $.makeNeutralElement( "div" ); this.element = $.makeNeutralElement( "div" );
this.imgElement = this.cacheImageRecord.getImage().cloneNode(); this.imgElement = image.cloneNode();
this.imgElement.style.msInterpolationMode = "nearest-neighbor"; this.imgElement.style.msInterpolationMode = "nearest-neighbor";
this.imgElement.style.width = "100%"; this.imgElement.style.width = "100%";
this.imgElement.style.height = "100%"; this.imgElement.style.height = "100%";
@ -309,6 +332,59 @@ $.Tile.prototype = {
$.setElementOpacity( this.element, this.opacity ); $.setElementOpacity( this.element, this.opacity );
}, },
/**
* The Image object for this tile.
* @member {Object} image
* @memberof OpenSeadragon.Tile#
* @deprecated
* @returns {Image}
*/
get image() {
$.console.error("[Tile.image] property has been deprecated. Use [Tile.prototype.getImage] instead.");
return this.getImage();
},
/**
* The URL of this tile's image.
* @member {String} url
* @memberof OpenSeadragon.Tile#
* @deprecated
* @returns {String}
*/
get url() {
$.console.error("[Tile.url] property has been deprecated. Use [Tile.prototype.getUrl] instead.");
return this.getUrl();
},
/**
* Get the Image object for this tile.
* @returns {Image}
*/
getImage: function() {
return this.cacheImageRecord.getImage();
},
/**
* Get the url string for this tile.
* @returns {String}
*/
getUrl: function() {
if (typeof this._url === 'function') {
return this._url();
}
return this._url;
},
/**
* Get the CanvasRenderingContext2D instance for tile image data drawn
* onto Canvas if enabled and available
* @returns {CanvasRenderingContext2D}
*/
getCanvasContext: function() {
return this.context2D || this.cacheImageRecord.getRenderedContext();
},
/** /**
* Renders the tile in a canvas-based context. * Renders the tile in a canvas-based context.
* @function * @function
@ -318,8 +394,12 @@ $.Tile.prototype = {
* where <code>rendered</code> is the context with the pre-drawn image. * where <code>rendered</code> is the context with the pre-drawn image.
* @param {Number} [scale=1] - Apply a scale to position and size * @param {Number} [scale=1] - Apply a scale to position and size
* @param {OpenSeadragon.Point} [translate] - A translation vector * @param {OpenSeadragon.Point} [translate] - A translation vector
* @param {Boolean} [shouldRoundPositionAndSize] - Tells whether to round
* position and size of tiles supporting alpha channel in non-transparency
* context.
* @param {OpenSeadragon.TileSource} source - The source specification of the tile.
*/ */
drawCanvas: function( context, drawingHandler, scale, translate ) { drawCanvas: function( context, drawingHandler, scale, translate, shouldRoundPositionAndSize, source) {
var position = this.position.times($.pixelDensityRatio), var position = this.position.times($.pixelDensityRatio),
size = this.size.times($.pixelDensityRatio), size = this.size.times($.pixelDensityRatio),
@ -332,7 +412,7 @@ $.Tile.prototype = {
return; return;
} }
rendered = this.context2D || this.cacheImageRecord.getRenderedContext(); rendered = this.getCanvasContext();
if ( !this.loaded || !rendered ){ if ( !this.loaded || !rendered ){
$.console.warn( $.console.warn(
@ -344,7 +424,6 @@ $.Tile.prototype = {
} }
context.save(); context.save();
context.globalAlpha = this.opacity; context.globalAlpha = this.opacity;
if (typeof scale === 'number' && scale !== 1) { if (typeof scale === 'number' && scale !== 1) {
@ -362,7 +441,15 @@ $.Tile.prototype = {
//ie its done fading or fading is turned off, and if we are drawing //ie its done fading or fading is turned off, and if we are drawing
//an image with an alpha channel, then the only way //an image with an alpha channel, then the only way
//to avoid seeing the tile underneath is to clear the rectangle //to avoid seeing the tile underneath is to clear the rectangle
if (context.globalAlpha === 1 && this._hasTransparencyChannel()) { if (context.globalAlpha === 1 && this.hasTransparency) {
if (shouldRoundPositionAndSize) {
// Round to the nearest whole pixel so we don't get seams from overlap.
position.x = Math.round(position.x);
position.y = Math.round(position.y);
size.x = Math.round(size.x);
size.y = Math.round(size.y);
}
//clearing only the inside of the rectangle occupied //clearing only the inside of the rectangle occupied
//by the png prevents edge flikering //by the png prevents edge flikering
context.clearRect( context.clearRect(
@ -408,7 +495,7 @@ $.Tile.prototype = {
/** /**
* Get the ratio between current and original size. * Get the ratio between current and original size.
* @function * @function
* @return {Float} * @returns {Float}
*/ */
getScaleForEdgeSmoothing: function() { getScaleForEdgeSmoothing: function() {
var context; var context;
@ -430,7 +517,7 @@ $.Tile.prototype = {
* Needed to avoid swimming and twitching. * Needed to avoid swimming and twitching.
* @function * @function
* @param {Number} [scale=1] - Scale to be applied to position. * @param {Number} [scale=1] - Scale to be applied to position.
* @return {OpenSeadragon.Point} * @returns {OpenSeadragon.Point}
*/ */
getTranslationForEdgeSmoothing: function(scale, canvasSize, sketchCanvasSize) { getTranslationForEdgeSmoothing: function(scale, canvasSize, sketchCanvasSize) {
// The translation vector must have positive values, otherwise the image goes a bit off // The translation vector must have positive values, otherwise the image goes a bit off

56
src/tilecache.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - TileCache * OpenSeadragon - TileCache
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -46,43 +46,22 @@ var TileRecord = function( options ) {
// private class // private class
var ImageRecord = function(options) { var ImageRecord = function(options) {
$.console.assert( options, "[ImageRecord] options is required" ); $.console.assert( options, "[ImageRecord] options is required" );
$.console.assert( options.image, "[ImageRecord] options.image is required" ); $.console.assert( options.data, "[ImageRecord] options.data is required" );
this._image = options.image;
this._tiles = []; this._tiles = [];
options.create.apply(null, [this, options.data, options.ownerTile]);
this._destroyImplementation = options.destroy.bind(null, this);
this.getImage = options.getImage.bind(null, this);
this.getData = options.getData.bind(null, this);
this.getRenderedContext = options.getRenderedContext.bind(null, this);
}; };
ImageRecord.prototype = { ImageRecord.prototype = {
destroy: function() { destroy: function() {
this._image = null; this._destroyImplementation();
this._renderedContext = null;
this._tiles = null; this._tiles = null;
}, },
getImage: function() {
return this._image;
},
getRenderedContext: function() {
if (!this._renderedContext) {
var canvas = document.createElement( 'canvas' );
canvas.width = this._image.width;
canvas.height = this._image.height;
this._renderedContext = canvas.getContext('2d');
this._renderedContext.drawImage( this._image, 0, 0 );
//since we are caching the prerendered image on a canvas
//allow the image to not be held in memory
this._image = null;
}
return this._renderedContext;
},
setRenderedContext: function(renderedContext) {
$.console.error("ImageRecord.setRenderedContext is deprecated. " +
"The rendered context should be created by the ImageRecord " +
"itself when calling ImageRecord.getRenderedContext.");
this._renderedContext = renderedContext;
},
addTile: function(tile) { addTile: function(tile) {
$.console.assert(tile, '[ImageRecord.addTile] tile is required'); $.console.assert(tile, '[ImageRecord.addTile] tile is required');
this._tiles.push(tile); this._tiles.push(tile);
@ -158,9 +137,22 @@ $.TileCache.prototype = {
var imageRecord = this._imagesLoaded[options.tile.cacheKey]; var imageRecord = this._imagesLoaded[options.tile.cacheKey];
if (!imageRecord) { if (!imageRecord) {
$.console.assert( options.image, "[TileCache.cacheTile] options.image is required to create an ImageRecord" );
if (!options.data) {
$.console.error("[TileCache.cacheTile] options.image was renamed to options.data. '.image' attribute " +
"has been deprecated and will be removed in the future.");
options.data = options.image;
}
$.console.assert( options.data, "[TileCache.cacheTile] options.data is required to create an ImageRecord" );
imageRecord = this._imagesLoaded[options.tile.cacheKey] = new ImageRecord({ imageRecord = this._imagesLoaded[options.tile.cacheKey] = new ImageRecord({
image: options.image data: options.data,
ownerTile: options.tile,
create: options.tiledImage.source.createTileCache,
destroy: options.tiledImage.source.destroyTileCache,
getImage: options.tiledImage.source.getTileCacheDataAsImage,
getData: options.tiledImage.source.getTileCacheData,
getRenderedContext: options.tiledImage.source.getTileCacheDataAsContext2D,
}); });
this._imagesLoadedCount++; this._imagesLoadedCount++;

908
src/tiledimage.js
View File

File diff suppressed because it is too large Load Diff

306
src/tilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - TileSource * OpenSeadragon - TileSource
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -69,6 +69,9 @@
* the XHR's withCredentials (for accessing secure data). * the XHR's withCredentials (for accessing secure data).
* @param {Object} [options.ajaxHeaders] * @param {Object} [options.ajaxHeaders]
* A set of headers to include in AJAX requests. * A set of headers to include in AJAX requests.
* @param {Boolean} [options.splitHashDataForPost]
* First occurrence of '#' in the options.url is used to split URL
* and the latter part is treated as POST data (applies to getImageInfo(...))
* @param {Number} [options.width] * @param {Number} [options.width]
* Width of the source image at max resolution in pixels. * Width of the source image at max resolution in pixels.
* @param {Number} [options.height] * @param {Number} [options.height]
@ -275,12 +278,32 @@ $.TileSource.prototype = {
return this._tileHeight; return this._tileHeight;
}, },
/**
* Set the maxLevel to the given level, and perform the memoization of
* getLevelScale with the new maxLevel. This function can be useful if the
* memoization is required before the first call of getLevelScale, or both
* memoized getLevelScale and maxLevel should be changed accordingly.
* @function
* @param {Number} level
*/
setMaxLevel: function( level ) {
this.maxLevel = level;
this._memoizeLevelScale();
},
/** /**
* @function * @function
* @param {Number} level * @param {Number} level
*/ */
getLevelScale: function( level ) { getLevelScale: function( level ) {
// if getLevelScale is not memoized, we generate the memoized version
// at the first call and return the result
this._memoizeLevelScale();
return this.getLevelScale( level );
},
// private
_memoizeLevelScale: function() {
// see https://github.com/openseadragon/openseadragon/issues/22 // see https://github.com/openseadragon/openseadragon/issues/22
// we use the tilesources implementation of getLevelScale to generate // we use the tilesources implementation of getLevelScale to generate
// a memoized re-implementation // a memoized re-implementation
@ -292,7 +315,6 @@ $.TileSource.prototype = {
this.getLevelScale = function( _level ){ this.getLevelScale = function( _level ){
return levelScaleCache[ _level ]; return levelScaleCache[ _level ];
}; };
return this.getLevelScale( level );
}, },
/** /**
@ -426,6 +448,15 @@ $.TileSource.prototype = {
} }
} }
var postData = null;
if (this.splitHashDataForPost) {
var hashIdx = url.indexOf("#");
if (hashIdx !== -1) {
postData = url.substring(hashIdx + 1);
url = url.substr(0, hashIdx);
}
}
callback = function( data ){ callback = function( data ){
if( typeof (data) === "string" ) { if( typeof (data) === "string" ) {
data = $.parseXml( data ); data = $.parseXml( data );
@ -447,7 +478,7 @@ $.TileSource.prototype = {
return; return;
} }
options = $TileSource.prototype.configure.apply( _this, [ data, url ]); options = $TileSource.prototype.configure.apply( _this, [ data, url, postData ]);
if (options.ajaxWithCredentials === undefined) { if (options.ajaxWithCredentials === undefined) {
options.ajaxWithCredentials = _this.ajaxWithCredentials; options.ajaxWithCredentials = _this.ajaxWithCredentials;
} }
@ -482,6 +513,7 @@ $.TileSource.prototype = {
// request info via xhr asynchronously. // request info via xhr asynchronously.
$.makeAjaxRequest( { $.makeAjaxRequest( {
url: url, url: url,
postData: postData,
withCredentials: this.ajaxWithCredentials, withCredentials: this.ajaxWithCredentials,
headers: this.ajaxHeaders, headers: this.ajaxHeaders,
success: function( xhr ) { success: function( xhr ) {
@ -497,7 +529,7 @@ $.TileSource.prototype = {
exception rather than the second one raised when we try to access xhr.status exception rather than the second one raised when we try to access xhr.status
*/ */
try { try {
msg = "HTTP " + xhr.status + " attempting to load TileSource"; msg = "HTTP " + xhr.status + " attempting to load TileSource: " + url;
} catch ( e ) { } catch ( e ) {
var formattedExc; var formattedExc;
if ( typeof ( exc ) === "undefined" || !exc.toString ) { if ( typeof ( exc ) === "undefined" || !exc.toString ) {
@ -506,9 +538,11 @@ $.TileSource.prototype = {
formattedExc = exc.toString(); formattedExc = exc.toString();
} }
msg = formattedExc + " attempting to load TileSource"; msg = formattedExc + " attempting to load TileSource: " + url;
} }
$.console.error(msg);
/*** /***
* Raised when an error occurs loading a TileSource. * Raised when an error occurs loading a TileSource.
* *
@ -518,11 +552,14 @@ $.TileSource.prototype = {
* @property {OpenSeadragon.TileSource} eventSource - A reference to the TileSource which raised the event. * @property {OpenSeadragon.TileSource} eventSource - A reference to the TileSource which raised the event.
* @property {String} message * @property {String} message
* @property {String} source * @property {String} source
* @property {String} postData - HTTP POST data (usually but not necessarily in k=v&k2=v2... form,
* see TileSource::getPostData) or null
* @property {?Object} userData - Arbitrary subscriber-defined object. * @property {?Object} userData - Arbitrary subscriber-defined object.
*/ */
_this.raiseEvent( 'open-failed', { _this.raiseEvent( 'open-failed', {
message: msg, message: msg,
source: url source: url,
postData: postData
}); });
} }
}); });
@ -542,7 +579,7 @@ $.TileSource.prototype = {
* @param {String|Object|Array|Document} data * @param {String|Object|Array|Document} data
* @param {String} url - the url the data was loaded * @param {String} url - the url the data was loaded
* from if any. * from if any.
* @return {Boolean} * @returns {Boolean}
*/ */
supports: function( data, url ) { supports: function( data, url ) {
return false; return false;
@ -559,11 +596,14 @@ $.TileSource.prototype = {
* @param {String|Object|Array|Document} data * @param {String|Object|Array|Document} data
* @param {String} url - the url the data was loaded * @param {String} url - the url the data was loaded
* from if any. * from if any.
* @return {Object} options - A dictionary of keyword arguments sufficient * @param {String} postData - HTTP POST data in k=v&k2=v2... form or null value obtained from
* to configure this tile sources constructor. * the protocol URL after '#' sign if flag splitHashDataForPost set to 'true'
* @returns {Object} options - A dictionary of keyword arguments sufficient
* to configure the tile source constructor (include all values you want to
* instantiate the TileSource subclass with - what _options_ object should contain).
* @throws {Error} * @throws {Error}
*/ */
configure: function( data, url ) { configure: function( data, url, postData ) {
throw new Error( "Method not implemented." ); throw new Error( "Method not implemented." );
}, },
@ -578,12 +618,44 @@ $.TileSource.prototype = {
* @param {Number} level * @param {Number} level
* @param {Number} x * @param {Number} x
* @param {Number} y * @param {Number} y
* @returns {String|Function} url - A string for the url or a function that returns a url string.
* @throws {Error} * @throws {Error}
*/ */
getTileUrl: function( level, x, y ) { getTileUrl: function( level, x, y ) {
throw new Error( "Method not implemented." ); throw new Error( "Method not implemented." );
}, },
/**
* Must use AJAX in order to work, i.e. loadTilesWithAjax = true is set.
* If a value is returned, ajax issues POST request to the tile url.
* If null is returned, ajax issues GET request.
* The return value must comply to the header 'content type'.
*
* Examples (USED HEADER --> getTilePostData CODE):
* 'Content-type': 'application/x-www-form-urlencoded' -->
* return "key1=value=1&key2=value2";
*
* 'Content-type': 'application/x-www-form-urlencoded' -->
* return JSON.stringify({key: "value", number: 5});
*
* 'Content-type': 'multipart/form-data' -->
* let result = new FormData();
* result.append("data", myData);
* return result;
*
* IMPORTANT: in case you move all the logic on image fetching
* to post data, you must re-define 'getTileHashKey(...)' to
* stay unique for different tile images.
*
* @param {Number} level
* @param {Number} x
* @param {Number} y
* @returns {*|null} post data to send with tile configuration request
*/
getTilePostData: function( level, x, y ) {
return null;
},
/** /**
* Responsible for retrieving the headers which will be attached to the image request for the * Responsible for retrieving the headers which will be attached to the image request for the
* region specified by the given x, y, and level components. * region specified by the given x, y, and level components.
@ -601,6 +673,32 @@ $.TileSource.prototype = {
return {}; return {};
}, },
/**
* The tile cache object is uniquely determined by this key and used to lookup
* the image data in cache: keys should be different if images are different.
*
* In case a tile has context2D property defined (TileSource.prototype.getContext2D)
* or its context2D is set manually; the cache is not used and this function
* is irrelevant.
* Note: default behaviour does not take into account post data.
* @param {Number} level tile level it was fetched with
* @param {Number} x x-coordinate in the pyramid level
* @param {Number} y y-coordinate in the pyramid level
* @param {String} url the tile was fetched with
* @param {Object} ajaxHeaders the tile was fetched with
* @param {*} postData data the tile was fetched with (type depends on getTilePostData(..) return type)
*/
getTileHashKey: function(level, x, y, url, ajaxHeaders, postData) {
function withHeaders(hash) {
return ajaxHeaders ? hash + "+" + JSON.stringify(ajaxHeaders) : hash;
}
if (typeof url !== "string") {
return withHeaders(level + "/" + x + "_" + y);
}
return withHeaders(url);
},
/** /**
* @function * @function
* @param {Number} level * @param {Number} level
@ -615,6 +713,194 @@ $.TileSource.prototype = {
y >= 0 && y >= 0 &&
x < numTiles.x && x < numTiles.x &&
y < numTiles.y; y < numTiles.y;
},
/**
* Decide whether tiles have transparency: this is crucial for correct images blending.
* @returns {boolean} true if the image has transparency
*/
hasTransparency: function(context2D, url, ajaxHeaders, post) {
return !!context2D || url.match('.png');
},
/**
* Download tile data.
* Note that if you override this function, you should override also downloadTileAbort().
* @param {ImageJob} context job context that you have to call finish(...) on.
* @param {String} [context.src] - URL of image to download.
* @param {String} [context.loadWithAjax] - Whether to load this image with AJAX.
* @param {String} [context.ajaxHeaders] - Headers to add to the image request if using AJAX.
* @param {Boolean} [context.ajaxWithCredentials] - Whether to set withCredentials on AJAX requests.
* @param {String} [context.crossOriginPolicy] - CORS policy to use for downloads
* @param {String} [context.postData] - HTTP POST data (usually but not necessarily in k=v&k2=v2... form,
* see TileSource::getPostData) or null
* @param {*} [context.userData] - Empty object to attach your own data and helper variables to.
* @param {Function} [context.finish] - Should be called unless abort() was executed, e.g. on all occasions,
* be it successful or unsuccessful request.
* Usage: context.finish(data, request, errMessage). Pass the downloaded data object or null upon failure.
* Add also reference to an ajax request if used. Provide error message in case of failure.
* @param {Function} [context.abort] - Called automatically when the job times out.
* Usage: context.abort().
* @param {Function} [context.callback] @private - Called automatically once image has been downloaded
* (triggered by finish).
* @param {Number} [context.timeout] @private - The max number of milliseconds that
* this image job may take to complete.
* @param {string} [context.errorMsg] @private - The final error message, default null (set by finish).
*/
downloadTileStart: function (context) {
var dataStore = context.userData,
image = new Image();
dataStore.image = image;
dataStore.request = null;
var finish = function(error) {
if (!image) {
context.finish(null, dataStore.request, "Image load failed: undefined Image instance.");
return;
}
image.onload = image.onerror = image.onabort = null;
context.finish(error ? null : image, dataStore.request, error);
};
image.onload = function () {
finish();
};
image.onabort = image.onerror = function() {
finish("Image load aborted.");
};
// Load the tile with an AJAX request if the loadWithAjax option is
// set. Otherwise load the image by setting the source proprety of the image object.
if (context.loadWithAjax) {
dataStore.request = $.makeAjaxRequest({
url: context.src,
withCredentials: context.ajaxWithCredentials,
headers: context.ajaxHeaders,
responseType: "arraybuffer",
postData: context.postData,
success: function(request) {
var blb;
// Make the raw data into a blob.
// BlobBuilder fallback adapted from
// http://stackoverflow.com/questions/15293694/blob-constructor-browser-compatibility
try {
blb = new window.Blob([request.response]);
} catch (e) {
var BlobBuilder = (
window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder
);
if (e.name === 'TypeError' && BlobBuilder) {
var bb = new BlobBuilder();
bb.append(request.response);
blb = bb.getBlob();
}
}
// If the blob is empty for some reason consider the image load a failure.
if (blb.size === 0) {
finish("Empty image response.");
} else {
// Create a URL for the blob data and make it the source of the image object.
// This will still trigger Image.onload to indicate a successful tile load.
image.src = (window.URL || window.webkitURL).createObjectURL(blb);
}
},
error: function(request) {
finish("Image load aborted - XHR error");
}
});
} else {
if (context.crossOriginPolicy !== false) {
image.crossOrigin = context.crossOriginPolicy;
}
image.src = context.src;
}
},
/**
* Provide means of aborting the execution.
* Note that if you override this function, you should override also downloadTileStart().
* @param {ImageJob} context job, the same object as with downloadTileStart(..)
* @param {*} [context.userData] - Empty object to attach (and mainly read) your own data.
*/
downloadTileAbort: function (context) {
if (context.userData.request) {
context.userData.request.abort();
}
var image = context.userData.image;
if (context.userData.image) {
image.onload = image.onerror = image.onabort = null;
}
},
/**
* Create cache object from the result of the download process. The
* cacheObject parameter should be used to attach the data to, there are no
* conventions on how it should be stored - all the logic is implemented within *TileCache() functions.
*
* Note that if you override any of *TileCache() functions, you should override all of them.
* @param {object} cacheObject context cache object
* @param {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object
* @param {Tile} tile instance the cache was created with
*/
createTileCache: function(cacheObject, data, tile) {
cacheObject._data = data;
},
/**
* Cache object destructor, unset all properties you created to allow GC collection.
* Note that if you override any of *TileCache() functions, you should override all of them.
* @param {object} cacheObject context cache object
*/
destroyTileCache: function (cacheObject) {
cacheObject._data = null;
cacheObject._renderedContext = null;
},
/**
* Raw data getter
* Note that if you override any of *TileCache() functions, you should override all of them.
* @param {object} cacheObject context cache object
* @returns {*} cache data
*/
getTileCacheData: function(cacheObject) {
return cacheObject._data;
},
/**
* Compatibility image element getter
* - plugins might need image representation of the data
* - div HTML rendering relies on image element presence
* Note that if you override any of *TileCache() functions, you should override all of them.
* @param {object} cacheObject context cache object
* @returns {Image} cache data as an Image
*/
getTileCacheDataAsImage: function(cacheObject) {
return cacheObject._data; //the data itself by default is Image
},
/**
* Compatibility context 2D getter
* - most heavily used rendering method is a canvas-based approach,
* convert the data to a canvas and return it's 2D context
* Note that if you override any of *TileCache() functions, you should override all of them.
* @param {object} cacheObject context cache object
* @returns {CanvasRenderingContext2D} context of the canvas representation of the cache data
*/
getTileCacheDataAsContext2D: function(cacheObject) {
if (!cacheObject._renderedContext) {
var canvas = document.createElement( 'canvas' );
canvas.width = cacheObject._data.width;
canvas.height = cacheObject._data.height;
cacheObject._renderedContext = canvas.getContext('2d');
cacheObject._renderedContext.drawImage( cacheObject._data, 0, 0 );
//since we are caching the prerendered image on a canvas
//allow the image to not be held in memory
cacheObject._data = null;
}
return cacheObject._renderedContext;
} }
}; };

2
src/tilesourcecollection.js
View File

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

7
src/tmstilesource.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - TmsTileSource * OpenSeadragon - TmsTileSource
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -111,10 +111,11 @@ $.extend( $.TmsTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
* @function * @function
* @param {Object} data - the raw configuration * @param {Object} data - the raw configuration
* @param {String} url - the url the data was retrieved from if any. * @param {String} url - the url the data was retrieved from if any.
* @return {Object} options - A dictionary of keyword arguments sufficient * @param {String} postData - HTTP POST data in k=v&k2=v2... form or null
* @returns {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor. * to configure this tile sources constructor.
*/ */
configure: function( data, url ){ configure: function( data, url, postData ){
return data; return data;
}, },

327
src/viewer.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Viewer * OpenSeadragon - Viewer
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -182,7 +182,7 @@ $.Viewer = function( options ) {
navImages: null, navImages: null,
//interface button controls //interface button controls
buttons: null, buttonGroup: null,
//TODO: this is defunct so safely remove it //TODO: this is defunct so safely remove it
profiler: null profiler: null
@ -204,6 +204,8 @@ $.Viewer = function( options ) {
prevContainerSize: null, prevContainerSize: null,
animating: false, animating: false,
forceRedraw: false, forceRedraw: false,
needsResize: false,
forceResize: false,
mouseInside: false, mouseInside: false,
group: null, group: null,
// whether we should be continuously zooming // whether we should be continuously zooming
@ -212,7 +214,9 @@ $.Viewer = function( options ) {
zoomFactor: null, zoomFactor: null,
lastZoomTime: null, lastZoomTime: null,
fullPage: false, fullPage: false,
onfullscreenchange: null onfullscreenchange: null,
lastClickTime: null,
draggingToZoom: false,
}; };
this._sequenceIndex = 0; this._sequenceIndex = 0;
@ -326,6 +330,17 @@ $.Viewer = function( options ) {
THIS[ this.hash ].prevContainerSize = _getSafeElemSize( this.container ); 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 // Create the world
this.world = new $.World({ this.world = new $.World({
viewer: this viewer: this
@ -382,7 +397,8 @@ $.Viewer = function( options ) {
flipped: this.flipped, flipped: this.flipped,
navigatorRotate: this.navigatorRotate, navigatorRotate: this.navigatorRotate,
homeFillsViewer: this.homeFillsViewer, homeFillsViewer: this.homeFillsViewer,
margins: this.viewportMargins margins: this.viewportMargins,
silenceMultiImageWarnings: this.silenceMultiImageWarnings
}); });
this.viewport._setContentBounds(this.world.getHomeBounds(), this.world.getContentFactor()); this.viewport._setContentBounds(this.world.getHomeBounds(), this.world.getContentFactor());
@ -390,7 +406,9 @@ $.Viewer = function( options ) {
// Create the image loader // Create the image loader
this.imageLoader = new $.ImageLoader({ this.imageLoader = new $.ImageLoader({
jobLimit: this.imageLoaderLimit, jobLimit: this.imageLoaderLimit,
timeout: options.timeout timeout: options.timeout,
tileRetryMax: this.tileRetryMax,
tileRetryDelay: this.tileRetryDelay
}); });
// Create the tile cache // Create the tile cache
@ -408,8 +426,6 @@ $.Viewer = function( options ) {
// Overlay container // Overlay container
this.overlaysContainer = $.makeNeutralElement( "div" ); this.overlaysContainer = $.makeNeutralElement( "div" );
$.setElementPointerEventsNone( this.overlaysContainer );
$.setElementTouchActionNone( this.overlaysContainer );
this.canvas.appendChild( this.overlaysContainer ); this.canvas.appendChild( this.overlaysContainer );
// Now that we have a drawer, see if it supports rotate. If not we need to remove the rotate buttons // Now that we have a drawer, see if it supports rotate. If not we need to remove the rotate buttons
@ -432,6 +448,7 @@ $.Viewer = function( options ) {
//Instantiate a navigator if configured //Instantiate a navigator if configured
if ( this.showNavigator){ if ( this.showNavigator){
this.navigator = new $.Navigator({ this.navigator = new $.Navigator({
element: this.navigatorElement,
id: this.navigatorId, id: this.navigatorId,
position: this.navigatorPosition, position: this.navigatorPosition,
sizeRatio: this.navigatorSizeRatio, sizeRatio: this.navigatorSizeRatio,
@ -449,7 +466,8 @@ $.Viewer = function( options ) {
opacity: this.navigatorOpacity, opacity: this.navigatorOpacity,
borderColor: this.navigatorBorderColor, borderColor: this.navigatorBorderColor,
displayRegionColor: this.navigatorDisplayRegionColor, displayRegionColor: this.navigatorDisplayRegionColor,
crossOriginPolicy: this.crossOriginPolicy crossOriginPolicy: this.crossOriginPolicy,
animationTime: this.animationTime,
}); });
} }
@ -490,7 +508,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
/** /**
* @function * @function
* @return {Boolean} * @returns {Boolean}
*/ */
isOpen: function () { isOpen: function () {
return !!this.world.getItemCount(); return !!this.world.getItemCount();
@ -508,6 +526,12 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
return this.open( tileSource ); return this.open( tileSource );
}, },
//deprecated
get buttons () {
$.console.warn('Viewer.buttons is deprecated; Please use Viewer.buttonGroup');
return this.buttonGroup;
},
/** /**
* Open tiled images into the viewer, closing any others. * Open tiled images into the viewer, closing any others.
* To get the TiledImage instance created by open, add an event listener for * To get the TiledImage instance created by open, add an event listener for
@ -522,7 +546,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* of the options parameter for {@link OpenSeadragon.Viewer#addTiledImage}. * of the options parameter for {@link OpenSeadragon.Viewer#addTiledImage}.
* @param {Number} initialPage - If sequenceMode is true, display this page initially * @param {Number} initialPage - If sequenceMode is true, display this page initially
* for the given tileSources. If specified, will overwrite the Viewer's existing initialPage property. * for the given tileSources. If specified, will overwrite the Viewer's existing initialPage property.
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:open * @fires OpenSeadragon.Viewer.event:open
* @fires OpenSeadragon.Viewer.event:open-failed * @fires OpenSeadragon.Viewer.event:open-failed
*/ */
@ -694,7 +718,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
/** /**
* @function * @function
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:close * @fires OpenSeadragon.Viewer.event:close
*/ */
close: function ( ) { close: function ( ) {
@ -715,6 +739,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
} }
THIS[ this.hash ].animating = false; THIS[ this.hash ].animating = false;
this.world.removeAll(); this.world.removeAll();
this.imageLoader.clear(); this.imageLoader.clear();
@ -746,6 +771,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* viewer = null; //important * viewer = null; //important
* *
* @function * @function
* @fires OpenSeadragon.Viewer.event:before-destroy
* @fires OpenSeadragon.Viewer.event:destroy
*/ */
destroy: function( ) { destroy: function( ) {
if ( !THIS[ this.hash ] ) { if ( !THIS[ this.hash ] ) {
@ -753,6 +780,17 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
return; return;
} }
/**
* Raised when the viewer is about to be destroyed (see {@link OpenSeadragon.Viewer#before-destroy}).
*
* @event before-destroy
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent( 'before-destroy' );
this._removeUpdatePixelDensityRatioEvent(); this._removeUpdatePixelDensityRatioEvent();
this.close(); this.close();
@ -763,6 +801,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
//TODO: implement this... //TODO: implement this...
//this.unbindSequenceControls() //this.unbindSequenceControls()
//this.unbindStandardControls() //this.unbindStandardControls()
if (this._resizeObserver){
this._resizeObserver.disconnect();
}
if (this.referenceStrip) { if (this.referenceStrip) {
this.referenceStrip.destroy(); this.referenceStrip.destroy();
@ -785,7 +826,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
this.navigator = null; this.navigator = null;
} }
this.removeAllHandlers();
if (this.buttonGroup) { if (this.buttonGroup) {
this.buttonGroup.destroy(); this.buttonGroup.destroy();
@ -831,11 +871,24 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
// clear our reference to the main element - they will need to pass it in again, creating a new viewer // clear our reference to the main element - they will need to pass it in again, creating a new viewer
this.element = null; this.element = null;
/**
* Raised when the viewer is destroyed (see {@link OpenSeadragon.Viewer#destroy}).
*
* @event destroy
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent( 'destroy' );
this.removeAllHandlers();
}, },
/** /**
* @function * @function
* @return {Boolean} * @returns {Boolean}
*/ */
isMouseNavEnabled: function () { isMouseNavEnabled: function () {
return this.innerTracker.isTracking(); return this.innerTracker.isTracking();
@ -844,7 +897,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
/** /**
* @function * @function
* @param {Boolean} enabled - true to enable, false to disable * @param {Boolean} enabled - true to enable, false to disable
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:mouse-enabled * @fires OpenSeadragon.Viewer.event:mouse-enabled
*/ */
setMouseNavEnabled: function( enabled ){ setMouseNavEnabled: function( enabled ){
@ -867,7 +920,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
/** /**
* @function * @function
* @return {Boolean} * @returns {Boolean}
*/ */
areControlsEnabled: function () { areControlsEnabled: function () {
var enabled = this.controls.length, var enabled = this.controls.length,
@ -884,7 +937,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* *
* @function * @function
* @param {Boolean} true to show, false to hide. * @param {Boolean} true to show, false to hide.
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:controls-enabled * @fires OpenSeadragon.Viewer.event:controls-enabled
*/ */
setControlsEnabled: function( enabled ) { setControlsEnabled: function( enabled ) {
@ -925,7 +978,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
/** /**
* @function * @function
* @return {Boolean} * @returns {Boolean}
*/ */
isFullPage: function () { isFullPage: function () {
return THIS[ this.hash ].fullPage; return THIS[ this.hash ].fullPage;
@ -937,7 +990,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @function * @function
* @param {Boolean} fullPage * @param {Boolean} fullPage
* If true, enter full page mode. If false, exit full page mode. * If true, enter full page mode. If false, exit full page mode.
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:pre-full-page * @fires OpenSeadragon.Viewer.event:pre-full-page
* @fires OpenSeadragon.Viewer.event:full-page * @fires OpenSeadragon.Viewer.event:full-page
*/ */
@ -1041,8 +1094,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
$.addClass( this.element, 'fullpage' ); $.addClass( this.element, 'fullpage' );
body.appendChild( this.element ); body.appendChild( this.element );
this.element.style.height = $.getWindowSize().y + 'px'; this.element.style.height = '100vh';
this.element.style.width = $.getWindowSize().x + 'px'; this.element.style.width = '100vw';
if ( this.toolbar && this.toolbar.element ) { if ( this.toolbar && this.toolbar.element ) {
this.element.style.height = ( this.element.style.height = (
@ -1152,7 +1205,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @function * @function
* @param {Boolean} fullScreen * @param {Boolean} fullScreen
* If true, enter full screen mode. If false, exit full screen mode. * If true, enter full screen mode. If false, exit full screen mode.
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:pre-full-screen * @fires OpenSeadragon.Viewer.event:pre-full-screen
* @fires OpenSeadragon.Viewer.event:full-screen * @fires OpenSeadragon.Viewer.event:full-screen
*/ */
@ -1247,17 +1300,26 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
/** /**
* @function * @function
* @return {Boolean} * @returns {Boolean}
*/ */
isVisible: function () { isVisible: function () {
return this.container.style.visibility !== "hidden"; return this.container.style.visibility !== "hidden";
}, },
//
/**
* @function
* @returns {Boolean} returns true if the viewer is in fullscreen
*/
isFullScreen: function () {
return $.isFullScreen() && this.isFullPage();
},
/** /**
* @function * @function
* @param {Boolean} visible * @param {Boolean} visible
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:visible * @fires OpenSeadragon.Viewer.event:visible
*/ */
setVisible: function( visible ){ setVisible: function( visible ){
@ -1496,7 +1558,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
ajaxWithCredentials: queueItem.options.ajaxWithCredentials, ajaxWithCredentials: queueItem.options.ajaxWithCredentials,
loadTilesWithAjax: queueItem.options.loadTilesWithAjax, loadTilesWithAjax: queueItem.options.loadTilesWithAjax,
ajaxHeaders: queueItem.options.ajaxHeaders, ajaxHeaders: queueItem.options.ajaxHeaders,
debugMode: _this.debugMode debugMode: _this.debugMode,
subPixelRoundingForTransparency: _this.subPixelRoundingForTransparency
}); });
if (_this.collectionMode) { if (_this.collectionMode) {
@ -1635,9 +1698,17 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
return this; 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 * @function
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
*/ */
bindSequenceControls: function(){ bindSequenceControls: function(){
@ -1726,7 +1797,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
/** /**
* @function * @function
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
*/ */
bindStandardControls: function(){ bindStandardControls: function(){
////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////
@ -1908,7 +1979,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
/** /**
* Gets the active page of a sequence * Gets the active page of a sequence
* @function * @function
* @return {Number} * @returns {Number}
*/ */
currentPage: function() { currentPage: function() {
return this._sequenceIndex; return this._sequenceIndex;
@ -1916,7 +1987,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
/** /**
* @function * @function
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:page * @fires OpenSeadragon.Viewer.event:page
*/ */
goToPage: function( page ){ goToPage: function( page ){
@ -1965,7 +2036,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @param {function} [onDraw] - If supplied the callback is called when the overlay * @param {function} [onDraw] - If supplied the callback is called when the overlay
* needs to be drawn. It it the responsibility of the callback to do any drawing/positioning. * needs to be drawn. It it the responsibility of the callback to do any drawing/positioning.
* It is passed position, size and element. * It is passed position, size and element.
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:add-overlay * @fires OpenSeadragon.Viewer.event:add-overlay
*/ */
addOverlay: function( element, location, placement, onDraw ) { addOverlay: function( element, location, placement, onDraw ) {
@ -2023,7 +2094,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @param {OpenSeadragon.Placement} [placement=OpenSeadragon.Placement.TOP_LEFT] - The position of the * @param {OpenSeadragon.Placement} [placement=OpenSeadragon.Placement.TOP_LEFT] - The position of the
* viewport which the location coordinates will be treated as relative * viewport which the location coordinates will be treated as relative
* to. * to.
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:update-overlay * @fires OpenSeadragon.Viewer.event:update-overlay
*/ */
updateOverlay: function( element, location, placement ) { updateOverlay: function( element, location, placement ) {
@ -2064,7 +2135,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @method * @method
* @param {Element|String} element - A reference to the element or an * @param {Element|String} element - A reference to the element or an
* element id which represent the ovelay content to be removed. * element id which represent the ovelay content to be removed.
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:remove-overlay * @fires OpenSeadragon.Viewer.event:remove-overlay
*/ */
removeOverlay: function( element ) { removeOverlay: function( element ) {
@ -2100,7 +2171,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* Removes all currently configured Overlays from this Viewer and schedules * Removes all currently configured Overlays from this Viewer and schedules
* an update. * an update.
* @method * @method
* @return {OpenSeadragon.Viewer} Chainable. * @returns {OpenSeadragon.Viewer} Chainable.
* @fires OpenSeadragon.Viewer.event:clear-overlay * @fires OpenSeadragon.Viewer.event:clear-overlay
*/ */
clearOverlays: function() { clearOverlays: function() {
@ -2127,7 +2198,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* @method * @method
* @param {Element|String} element - A reference to the element or an * @param {Element|String} element - A reference to the element or an
* element id which represents the overlay content. * element id which represents the overlay content.
* @return {OpenSeadragon.Overlay} the matching overlay or null if none found. * @returns {OpenSeadragon.Overlay} the matching overlay or null if none found.
*/ */
getOverlayById: function( element ) { getOverlayById: function( element ) {
var i; var i;
@ -2208,7 +2279,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
* Gets this viewer's gesture settings for the given pointer device type. * Gets this viewer's gesture settings for the given pointer device type.
* @method * @method
* @param {String} type - The pointer device type to get the gesture settings for ("mouse", "touch", "pen", etc.). * @param {String} type - The pointer device type to get the gesture settings for ("mouse", "touch", "pen", etc.).
* @return {OpenSeadragon.GestureSettings} * @returns {OpenSeadragon.GestureSettings}
*/ */
gestureSettingsByDeviceType: function ( type ) { gestureSettingsByDeviceType: function ( type ) {
switch ( type ) { switch ( type ) {
@ -2350,6 +2421,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
} }
this.goToPage( next ); this.goToPage( next );
}, },
isAnimating: function () {
return THIS[ this.hash ].animating;
},
}); });
@ -2419,6 +2494,7 @@ function getTileSourceImplementation( viewer, tileSource, imgOptions, successCal
ajaxWithCredentials: viewer.ajaxWithCredentials, ajaxWithCredentials: viewer.ajaxWithCredentials,
ajaxHeaders: imgOptions.ajaxHeaders ? ajaxHeaders: imgOptions.ajaxHeaders ?
imgOptions.ajaxHeaders : viewer.ajaxHeaders, imgOptions.ajaxHeaders : viewer.ajaxHeaders,
splitHashDataForPost: viewer.splitHashDataForPost,
useCanvas: viewer.useCanvas, useCanvas: viewer.useCanvas,
success: function( event ) { success: function( event ) {
successCallback( event.tileSource ); successCallback( event.tileSource );
@ -2659,8 +2735,8 @@ function onCanvasKeyDown( event ) {
var canvasKeyDownEventArgs = { var canvasKeyDownEventArgs = {
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
preventDefaultAction: false, preventDefaultAction: false,
preventVerticalPan: event.preventVerticalPan, preventVerticalPan: event.preventVerticalPan || !this.panVertical,
preventHorizontalPan: event.preventHorizontalPan preventHorizontalPan: event.preventHorizontalPan || !this.panHorizontal
}; };
/** /**
@ -2730,12 +2806,24 @@ function onCanvasKeyPress( event ) {
var canvasKeyPressEventArgs = { var canvasKeyPressEventArgs = {
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
preventDefaultAction: false, preventDefaultAction: false,
preventVerticalPan: event.preventVerticalPan, preventVerticalPan: event.preventVerticalPan || !this.panVertical,
preventHorizontalPan: event.preventHorizontalPan preventHorizontalPan: event.preventHorizontalPan || !this.panHorizontal
}; };
// This event is documented in onCanvasKeyDown /**
this.raiseEvent('canvas-key', canvasKeyPressEventArgs); * 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 {Boolean} preventDefaultAction - Set to true to prevent default keyboard behaviour. Default: false.
* @property {Boolean} preventVerticalPan - Set to true to prevent keyboard vertical panning. Default: false.
* @property {Boolean} preventHorizontalPan - Set to true to prevent keyboard horizontal panning. Default: false.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent('canvas-key-press', canvasKeyPressEventArgs);
if ( !canvasKeyPressEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) { if ( !canvasKeyPressEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
switch( event.keyCode ){ switch( event.keyCode ){
@ -2795,18 +2883,18 @@ function onCanvasKeyPress( event ) {
break; break;
case 114: //r - clockwise rotation case 114: //r - clockwise rotation
if(this.viewport.flipped){ if(this.viewport.flipped){
this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360)); this.viewport.setRotation(this.viewport.getRotation() - this.rotationIncrement);
} else{ } else{
this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360)); this.viewport.setRotation(this.viewport.getRotation() + this.rotationIncrement);
} }
this.viewport.applyConstraints(); this.viewport.applyConstraints();
event.preventDefault = true; event.preventDefault = true;
break; break;
case 82: //R - counterclockwise rotation case 82: //R - counterclockwise rotation
if(this.viewport.flipped){ if(this.viewport.flipped){
this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360)); this.viewport.setRotation(this.viewport.getRotation() + this.rotationIncrement);
} else{ } else{
this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360)); this.viewport.setRotation(this.viewport.getRotation() - this.rotationIncrement);
} }
this.viewport.applyConstraints(); this.viewport.applyConstraints();
event.preventDefault = true; event.preventDefault = true;
@ -2831,6 +2919,8 @@ function onCanvasKeyPress( event ) {
} }
} }
function onCanvasClick( event ) { function onCanvasClick( event ) {
var gestureSettings; var gestureSettings;
@ -2850,6 +2940,7 @@ function onCanvasClick( event ) {
quick: event.quick, quick: event.quick,
shift: event.shift, shift: event.shift,
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
originalTarget: event.originalTarget,
preventDefaultAction: false preventDefaultAction: false
}; };
@ -2865,20 +2956,35 @@ function onCanvasClick( event ) {
* @property {Boolean} quick - True only if the clickDistThreshold and clickTimeThreshold are both passed. Useful for differentiating between clicks and drags. * @property {Boolean} quick - True only if the clickDistThreshold and clickTimeThreshold are both passed. Useful for differentiating between clicks and drags.
* @property {Boolean} shift - True if the shift key was pressed during this event. * @property {Boolean} shift - True if the shift key was pressed during this event.
* @property {Object} originalEvent - The original DOM event. * @property {Object} originalEvent - The original DOM event.
* @property {Element} originalTarget - The DOM element clicked on.
* @property {Boolean} preventDefaultAction - Set to true to prevent default click to zoom behaviour. Default: false. * @property {Boolean} preventDefaultAction - Set to true to prevent default click to zoom behaviour. Default: false.
* @property {?Object} userData - Arbitrary subscriber-defined object. * @property {?Object} userData - Arbitrary subscriber-defined object.
*/ */
this.raiseEvent( 'canvas-click', canvasClickEventArgs); this.raiseEvent( 'canvas-click', canvasClickEventArgs);
if ( !canvasClickEventArgs.preventDefaultAction && this.viewport && event.quick ) { if ( !canvasClickEventArgs.preventDefaultAction && this.viewport && event.quick ) {
gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
if ( gestureSettings.clickToZoom ) {
if (gestureSettings.clickToZoom === true){
this.viewport.zoomBy( this.viewport.zoomBy(
event.shift ? 1.0 / this.zoomPerClick : this.zoomPerClick, event.shift ? 1.0 / this.zoomPerClick : this.zoomPerClick,
gestureSettings.zoomToRefPoint ? this.viewport.pointFromPixel( event.position, true ) : null gestureSettings.zoomToRefPoint ? this.viewport.pointFromPixel( event.position, true ) : null
); );
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
if( gestureSettings.dblClickDragToZoom){
if(THIS[ this.hash ].draggingToZoom === true){
THIS[ this.hash ].lastClickTime = null;
THIS[ this.hash ].draggingToZoom = false;
}
else{
THIS[ this.hash ].lastClickTime = $.now();
}
}
} }
} }
@ -2958,7 +3064,13 @@ function onCanvasDrag( event ) {
gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
if ( gestureSettings.dragToPan && !canvasDragEventArgs.preventDefaultAction && this.viewport ) { if(!canvasDragEventArgs.preventDefaultAction && this.viewport){
if (gestureSettings.dblClickDragToZoom && THIS[ this.hash ].draggingToZoom){
var factor = Math.pow( this.zoomPerDblClickDrag, event.delta.y / 50);
this.viewport.zoomBy(factor);
}
else if (gestureSettings.dragToPan && !THIS[ this.hash ].draggingToZoom) {
if( !this.panHorizontal ){ if( !this.panHorizontal ){
event.delta.x = 0; event.delta.x = 0;
} }
@ -2975,26 +3087,28 @@ function onCanvasDrag( event ) {
this.viewport.centerSpringX.target.value += delta.x; this.viewport.centerSpringX.target.value += delta.x;
this.viewport.centerSpringY.target.value += delta.y; this.viewport.centerSpringY.target.value += delta.y;
var bounds = this.viewport.getBounds();
var constrainedBounds = this.viewport.getConstrainedBounds(); var constrainedBounds = this.viewport.getConstrainedBounds();
this.viewport.centerSpringX.target.value -= delta.x; this.viewport.centerSpringX.target.value -= delta.x;
this.viewport.centerSpringY.target.value -= delta.y; this.viewport.centerSpringY.target.value -= delta.y;
if (bounds.x !== constrainedBounds.x) { if (constrainedBounds.xConstrained) {
event.delta.x = 0; event.delta.x = 0;
} }
if (bounds.y !== constrainedBounds.y) { if (constrainedBounds.yConstrained) {
event.delta.y = 0; event.delta.y = 0;
} }
} }
this.viewport.panBy( this.viewport.deltaPointsFromPixels( event.delta.negate() ), gestureSettings.flickEnabled && !this.constrainDuringPan); this.viewport.panBy( this.viewport.deltaPointsFromPixels( event.delta.negate() ), gestureSettings.flickEnabled && !this.constrainDuringPan);
} }
}
} }
function onCanvasDragEnd( event ) { function onCanvasDragEnd( event ) {
var gestureSettings;
var canvasDragEndEventArgs = { var canvasDragEndEventArgs = {
tracker: event.eventSource, tracker: event.eventSource,
pointerType: event.pointerType, pointerType: event.pointerType,
@ -3025,9 +3139,11 @@ function onCanvasDragEnd( event ) {
*/ */
this.raiseEvent('canvas-drag-end', canvasDragEndEventArgs); this.raiseEvent('canvas-drag-end', canvasDragEndEventArgs);
gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
if (!canvasDragEndEventArgs.preventDefaultAction && this.viewport) { if (!canvasDragEndEventArgs.preventDefaultAction && this.viewport) {
var gestureSettings = this.gestureSettingsByDeviceType(event.pointerType); if ( !THIS[ this.hash ].draggingToZoom &&
if (gestureSettings.flickEnabled && gestureSettings.flickEnabled &&
event.speed >= gestureSettings.flickMinSpeed) { event.speed >= gestureSettings.flickMinSpeed) {
var amplitudeX = 0; var amplitudeX = 0;
if (this.panHorizontal) { if (this.panHorizontal) {
@ -3047,6 +3163,13 @@ function onCanvasDragEnd( event ) {
} }
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
if( gestureSettings.dblClickDragToZoom && THIS[ this.hash ].draggingToZoom === true ){
THIS[ this.hash ].draggingToZoom = false;
}
} }
function onCanvasEnter( event ) { function onCanvasEnter( event ) {
@ -3110,6 +3233,8 @@ function onCanvasLeave( event ) {
} }
function onCanvasPress( event ) { function onCanvasPress( event ) {
var gestureSettings;
/** /**
* Raised when the primary mouse button is pressed or touch starts on the {@link OpenSeadragon.Viewer#canvas} element. * Raised when the primary mouse button is pressed or touch starts on the {@link OpenSeadragon.Viewer#canvas} element.
* *
@ -3133,6 +3258,24 @@ function onCanvasPress( event ) {
insideElementReleased: event.insideElementReleased, insideElementReleased: event.insideElementReleased,
originalEvent: event.originalEvent originalEvent: event.originalEvent
}); });
gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
if ( gestureSettings.dblClickDragToZoom ){
var lastClickTime = THIS[ this.hash ].lastClickTime;
var currClickTime = $.now();
if ( lastClickTime === null) {
return;
}
if ((currClickTime - lastClickTime) < this.dblClickTimeThreshold) {
THIS[ this.hash ].draggingToZoom = true;
}
THIS[ this.hash ].lastClickTime = null;
}
} }
function onCanvasRelease( event ) { function onCanvasRelease( event ) {
@ -3266,9 +3409,6 @@ function onCanvasPinch( event ) {
if ( gestureSettings.pinchToZoom && if ( gestureSettings.pinchToZoom &&
(!canvasPinchEventArgs.preventDefaultPanAction || !canvasPinchEventArgs.preventDefaultZoomAction) ) { (!canvasPinchEventArgs.preventDefaultPanAction || !canvasPinchEventArgs.preventDefaultZoomAction) ) {
centerPt = this.viewport.pointFromPixel( event.center, true ); centerPt = this.viewport.pointFromPixel( event.center, true );
if ( !canvasPinchEventArgs.preventDefaultZoomAction ) {
this.viewport.zoomBy( event.distance / event.lastDistance, centerPt, true );
}
if ( gestureSettings.zoomToRefPoint && !canvasPinchEventArgs.preventDefaultPanAction ) { if ( gestureSettings.zoomToRefPoint && !canvasPinchEventArgs.preventDefaultPanAction ) {
lastCenterPt = this.viewport.pointFromPixel( event.lastCenter, true ); lastCenterPt = this.viewport.pointFromPixel( event.lastCenter, true );
panByPt = lastCenterPt.minus( centerPt ); panByPt = lastCenterPt.minus( centerPt );
@ -3280,6 +3420,9 @@ function onCanvasPinch( event ) {
} }
this.viewport.panBy(panByPt, true); this.viewport.panBy(panByPt, true);
} }
if ( !canvasPinchEventArgs.preventDefaultZoomAction ) {
this.viewport.zoomBy( event.distance / event.lastDistance, centerPt, true );
}
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
if ( gestureSettings.pinchRotate && !canvasPinchEventArgs.preventDefaultRotateAction ) { if ( gestureSettings.pinchRotate && !canvasPinchEventArgs.preventDefaultRotateAction ) {
@ -3442,6 +3585,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 ) { function updateOnce( viewer ) {
//viewer.profiler.beginUpdate(); //viewer.profiler.beginUpdate();
@ -3449,29 +3613,22 @@ function updateOnce( viewer ) {
if (viewer._opening || !THIS[viewer.hash]) { if (viewer._opening || !THIS[viewer.hash]) {
return; return;
} }
if (viewer.autoResize || THIS[viewer.hash].forceResize){
if (viewer.autoResize) { var containerSize;
var containerSize = _getSafeElemSize(viewer.container); if(viewer._autoResizePolling){
containerSize = _getSafeElemSize(viewer.container);
var prevContainerSize = THIS[viewer.hash].prevContainerSize; var prevContainerSize = THIS[viewer.hash].prevContainerSize;
if (!containerSize.equals(prevContainerSize)) { if (!containerSize.equals(prevContainerSize)) {
var viewport = viewer.viewport; THIS[viewer.hash].needsResize = true;
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;
} }
} }
if(THIS[viewer.hash].needsResize){
doViewerResize(viewer, containerSize || _getSafeElemSize(viewer.container));
}
}
var viewportChange = viewer.viewport.update(); var viewportChange = viewer.viewport.update();
var animated = viewer.world.update() || viewportChange; var animated = viewer.world.update() || viewportChange;
@ -3494,7 +3651,9 @@ function updateOnce( viewer ) {
animated = viewer.referenceStrip.update( viewer.viewport ) || animated; animated = viewer.referenceStrip.update( viewer.viewport ) || animated;
} }
if ( !THIS[ viewer.hash ].animating && animated ) { var currentAnimating = THIS[ viewer.hash ].animating;
if ( !currentAnimating && animated ) {
/** /**
* Raised when any spring animation starts (zoom, pan, etc.). * Raised when any spring animation starts (zoom, pan, etc.).
* *
@ -3508,7 +3667,13 @@ function updateOnce( viewer ) {
abortControlsAutoHide( viewer ); abortControlsAutoHide( viewer );
} }
if ( animated || THIS[ viewer.hash ].forceRedraw || viewer.world.needsDraw() ) { var isAnimationFinished = currentAnimating && !animated;
if ( isAnimationFinished ) {
THIS[ viewer.hash ].animating = false;
}
if ( animated || isAnimationFinished || THIS[ viewer.hash ].forceRedraw || viewer.world.needsDraw() ) {
drawWorld( viewer ); drawWorld( viewer );
viewer._drawOverlays(); viewer._drawOverlays();
if( viewer.navigator ){ if( viewer.navigator ){
@ -3532,7 +3697,7 @@ function updateOnce( viewer ) {
} }
} }
if ( THIS[ viewer.hash ].animating && !animated ) { if ( isAnimationFinished ) {
/** /**
* Raised when any spring animation ends (zoom, pan, etc.). * Raised when any spring animation ends (zoom, pan, etc.).
* *
@ -3683,9 +3848,9 @@ function onRotateLeft() {
var currRotation = this.viewport.getRotation(); var currRotation = this.viewport.getRotation();
if ( this.viewport.flipped ){ if ( this.viewport.flipped ){
currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360); currRotation += this.rotationIncrement;
} else { } else {
currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360); currRotation -= this.rotationIncrement;
} }
this.viewport.setRotation(currRotation); this.viewport.setRotation(currRotation);
} }
@ -3696,9 +3861,9 @@ function onRotateRight() {
var currRotation = this.viewport.getRotation(); var currRotation = this.viewport.getRotation();
if ( this.viewport.flipped ){ if ( this.viewport.flipped ){
currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360); currRotation -= this.rotationIncrement;
} else { } else {
currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360); currRotation += this.rotationIncrement;
} }
this.viewport.setRotation(currRotation); this.viewport.setRotation(currRotation);
} }

377
src/viewport.js
View File

@ -2,7 +2,7 @@
* OpenSeadragon - Viewport * OpenSeadragon - Viewport
* *
* Copyright (C) 2009 CodePlex Foundation * Copyright (C) 2009 CodePlex Foundation
* Copyright (C) 2010-2013 OpenSeadragon contributors * Copyright (C) 2010-2022 OpenSeadragon contributors
* *
* Redistribution and use in source and binary forms, with or without * Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are * modification, are permitted provided that the following conditions are
@ -54,6 +54,7 @@
* @param {Number} [options.maxZoomLevel] - See maxZoomLevel in {@link OpenSeadragon.Options}. * @param {Number} [options.maxZoomLevel] - See maxZoomLevel in {@link OpenSeadragon.Options}.
* @param {Number} [options.degrees] - See degrees in {@link OpenSeadragon.Options}. * @param {Number} [options.degrees] - See degrees in {@link OpenSeadragon.Options}.
* @param {Boolean} [options.homeFillsViewer] - See homeFillsViewer in {@link OpenSeadragon.Options}. * @param {Boolean} [options.homeFillsViewer] - See homeFillsViewer in {@link OpenSeadragon.Options}.
* @param {Boolean} [options.silenceMultiImageWarnings] - See silenceMultiImageWarnings in {@link OpenSeadragon.Options}.
*/ */
$.Viewport = function( options ) { $.Viewport = function( options ) {
@ -85,6 +86,9 @@ $.Viewport = function( options ) {
delete options.margins; delete options.margins;
options.initialDegrees = options.degrees;
delete options.degrees;
$.extend( true, this, { $.extend( true, this, {
//required settings //required settings
@ -93,6 +97,7 @@ $.Viewport = function( options ) {
//internal state properties //internal state properties
zoomPoint: null, zoomPoint: null,
rotationPivot: null,
viewer: null, viewer: null,
//configurable options //configurable options
@ -106,9 +111,10 @@ $.Viewport = function( options ) {
defaultZoomLevel: $.DEFAULT_SETTINGS.defaultZoomLevel, defaultZoomLevel: $.DEFAULT_SETTINGS.defaultZoomLevel,
minZoomLevel: $.DEFAULT_SETTINGS.minZoomLevel, minZoomLevel: $.DEFAULT_SETTINGS.minZoomLevel,
maxZoomLevel: $.DEFAULT_SETTINGS.maxZoomLevel, maxZoomLevel: $.DEFAULT_SETTINGS.maxZoomLevel,
degrees: $.DEFAULT_SETTINGS.degrees, initialDegrees: $.DEFAULT_SETTINGS.degrees,
flipped: $.DEFAULT_SETTINGS.flipped, flipped: $.DEFAULT_SETTINGS.flipped,
homeFillsViewer: $.DEFAULT_SETTINGS.homeFillsViewer homeFillsViewer: $.DEFAULT_SETTINGS.homeFillsViewer,
silenceMultiImageWarnings: $.DEFAULT_SETTINGS.silenceMultiImageWarnings
}, options ); }, options );
@ -131,9 +137,16 @@ $.Viewport = function( options ) {
animationTime: this.animationTime animationTime: this.animationTime
}); });
this.degreesSpring = new $.Spring({
initial: options.initialDegrees,
springStiffness: this.springStiffness,
animationTime: this.animationTime
});
this._oldCenterX = this.centerSpringX.current.value; this._oldCenterX = this.centerSpringX.current.value;
this._oldCenterY = this.centerSpringY.current.value; this._oldCenterY = this.centerSpringY.current.value;
this._oldZoom = this.zoomSpring.current.value; this._oldZoom = this.zoomSpring.current.value;
this._oldDegrees = this.degreesSpring.current.value;
this._setContentBounds(new $.Rect(0, 0, 1, 1), 1); this._setContentBounds(new $.Rect(0, 0, 1, 1), 1);
@ -143,11 +156,24 @@ $.Viewport = function( options ) {
/** @lends OpenSeadragon.Viewport.prototype */ /** @lends OpenSeadragon.Viewport.prototype */
$.Viewport.prototype = { $.Viewport.prototype = {
// deprecated
get degrees () {
$.console.warn('Accessing [Viewport.degrees] is deprecated. Use viewport.getRotation instead.');
return this.getRotation();
},
// deprecated
set degrees (degrees) {
$.console.warn('Setting [Viewport.degrees] is deprecated. Use viewport.rotateTo, viewport.rotateBy, or viewport.setRotation instead.');
this.rotateTo(degrees);
},
/** /**
* Updates the viewport's home bounds and constraints for the given content size. * Updates the viewport's home bounds and constraints for the given content size.
* @function * @function
* @param {OpenSeadragon.Point} contentSize - size of the content in content units * @param {OpenSeadragon.Point} contentSize - size of the content in content units
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:reset-size * @fires OpenSeadragon.Viewer.event:reset-size
*/ */
resetContentSize: function(contentSize) { resetContentSize: function(contentSize) {
@ -182,7 +208,7 @@ $.Viewport.prototype = {
this._contentSizeNoRotate = this._contentBoundsNoRotate.getSize().times( this._contentSizeNoRotate = this._contentBoundsNoRotate.getSize().times(
contentFactor); contentFactor);
this._contentBounds = bounds.rotate(this.degrees).getBoundingBox(); this._contentBounds = bounds.rotate(this.getRotation()).getBoundingBox();
this._contentSize = this._contentBounds.getSize().times(contentFactor); this._contentSize = this._contentBounds.getSize().times(contentFactor);
this._contentAspectRatio = this._contentSize.x / this._contentSize.y; this._contentAspectRatio = this._contentSize.x / this._contentSize.y;
@ -365,7 +391,7 @@ $.Viewport.prototype = {
* @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, in viewport coordinates. * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, in viewport coordinates.
*/ */
getBounds: function(current) { getBounds: function(current) {
return this.getBoundsNoRotate(current).rotate(-this.getRotation()); return this.getBoundsNoRotate(current).rotate(-this.getRotation(current));
}, },
/** /**
@ -397,7 +423,7 @@ $.Viewport.prototype = {
*/ */
getBoundsWithMargins: function(current) { getBoundsWithMargins: function(current) {
return this.getBoundsNoRotateWithMargins(current).rotate( return this.getBoundsNoRotateWithMargins(current).rotate(
-this.getRotation(), this.getCenter(current)); -this.getRotation(current), this.getCenter(current));
}, },
/** /**
@ -457,7 +483,7 @@ $.Viewport.prototype = {
); );
newZoomPixel = this._pixelFromPoint(this.zoomPoint, bounds); 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 ); deltaZoomPoints = deltaZoomPixels.divide( this._containerInnerSize.x * zoom );
return centerTarget.plus( deltaZoomPoints ); return centerTarget.plus( deltaZoomPoints );
@ -486,52 +512,78 @@ $.Viewport.prototype = {
* @function * @function
* @private * @private
* @param {OpenSeadragon.Rect} bounds * @param {OpenSeadragon.Rect} bounds
* @return {OpenSeadragon.Rect} constrained bounds. * @returns {OpenSeadragon.Rect} constrained bounds.
*/ */
_applyBoundaryConstraints: function(bounds) { _applyBoundaryConstraints: function(bounds) {
var newBounds = new $.Rect( var newBounds = this.viewportToViewerElementRectangle(bounds).getBoundingBox();
bounds.x, var cb = this.viewportToViewerElementRectangle(this._contentBoundsNoRotate).getBoundingBox();
bounds.y,
bounds.width, var xConstrained = false;
bounds.height); var yConstrained = false;
if (this.wrapHorizontal) { if (this.wrapHorizontal) {
//do nothing //do nothing
} else { } else {
var horizontalThreshold = this.visibilityRatio * newBounds.width;
var boundsRight = newBounds.x + newBounds.width; var boundsRight = newBounds.x + newBounds.width;
var contentRight = this._contentBoundsNoRotate.x + this._contentBoundsNoRotate.width; var contentRight = cb.x + cb.width;
var leftDx = this._contentBoundsNoRotate.x - boundsRight + horizontalThreshold;
var rightDx = contentRight - newBounds.x - horizontalThreshold;
if (horizontalThreshold > this._contentBoundsNoRotate.width) { var horizontalThreshold, leftDx, rightDx;
if (newBounds.width > cb.width) {
horizontalThreshold = this.visibilityRatio * cb.width;
} else {
horizontalThreshold = this.visibilityRatio * newBounds.width;
}
leftDx = cb.x - boundsRight + horizontalThreshold;
rightDx = contentRight - newBounds.x - horizontalThreshold;
if (horizontalThreshold > cb.width) {
newBounds.x += (leftDx + rightDx) / 2; newBounds.x += (leftDx + rightDx) / 2;
xConstrained = true;
} else if (rightDx < 0) { } else if (rightDx < 0) {
newBounds.x += rightDx; newBounds.x += rightDx;
xConstrained = true;
} else if (leftDx > 0) { } else if (leftDx > 0) {
newBounds.x += leftDx; newBounds.x += leftDx;
xConstrained = true;
} }
} }
if (this.wrapVertical) { if (this.wrapVertical) {
//do nothing //do nothing
} else { } else {
var verticalThreshold = this.visibilityRatio * newBounds.height;
var boundsBottom = newBounds.y + newBounds.height; var boundsBottom = newBounds.y + newBounds.height;
var contentBottom = this._contentBoundsNoRotate.y + this._contentBoundsNoRotate.height; var contentBottom = cb.y + cb.height;
var topDy = this._contentBoundsNoRotate.y - boundsBottom + verticalThreshold;
var bottomDy = contentBottom - newBounds.y - verticalThreshold;
if (verticalThreshold > this._contentBoundsNoRotate.height) { var verticalThreshold, topDy, bottomDy;
if (newBounds.height > cb.height) {
verticalThreshold = this.visibilityRatio * cb.height;
} else{
verticalThreshold = this.visibilityRatio * newBounds.height;
}
topDy = cb.y - boundsBottom + verticalThreshold;
bottomDy = contentBottom - newBounds.y - verticalThreshold;
if (verticalThreshold > cb.height) {
newBounds.y += (topDy + bottomDy) / 2; newBounds.y += (topDy + bottomDy) / 2;
yConstrained = true;
} else if (bottomDy < 0) { } else if (bottomDy < 0) {
newBounds.y += bottomDy; newBounds.y += bottomDy;
yConstrained = true;
} else if (topDy > 0) { } else if (topDy > 0) {
newBounds.y += topDy; 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;
}, },
/** /**
@ -564,8 +616,8 @@ $.Viewport.prototype = {
* zooming and panning to the closest acceptable zoom and location. * zooming and panning to the closest acceptable zoom and location.
* @function * @function
* @param {Boolean} [immediately=false] * @param {Boolean} [immediately=false]
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:constrain * @fires OpenSeadragon.Viewer.event:constrain if constraints were applied
*/ */
applyConstraints: function(immediately) { applyConstraints: function(immediately) {
var actualZoom = this.getZoom(); var actualZoom = this.getZoom();
@ -575,17 +627,13 @@ $.Viewport.prototype = {
this.zoomTo(constrainedZoom, this.zoomPoint, immediately); this.zoomTo(constrainedZoom, this.zoomPoint, immediately);
} }
var bounds = this.getBoundsNoRotate(); var constrainedBounds = this.getConstrainedBounds(false);
var constrainedBounds = this._applyBoundaryConstraints(bounds);
this._raiseConstraintsEvent(immediately);
if (bounds.x !== constrainedBounds.x || if(constrainedBounds.constraintApplied){
bounds.y !== constrainedBounds.y || this.fitBounds(constrainedBounds, immediately);
immediately) { this._raiseConstraintsEvent(immediately);
this.fitBounds(
constrainedBounds.rotate(-this.getRotation()),
immediately);
} }
return this; return this;
}, },
@ -593,7 +641,7 @@ $.Viewport.prototype = {
* Equivalent to {@link OpenSeadragon.Viewport#applyConstraints} * Equivalent to {@link OpenSeadragon.Viewport#applyConstraints}
* @function * @function
* @param {Boolean} [immediately=false] * @param {Boolean} [immediately=false]
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:constrain * @fires OpenSeadragon.Viewer.event:constrain
*/ */
ensureVisible: function(immediately) { ensureVisible: function(immediately) {
@ -605,7 +653,7 @@ $.Viewport.prototype = {
* @private * @private
* @param {OpenSeadragon.Rect} bounds * @param {OpenSeadragon.Rect} bounds
* @param {Object} options (immediately=false, constraints=false) * @param {Object} options (immediately=false, constraints=false)
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
*/ */
_fitBounds: function(bounds, options) { _fitBounds: function(bounds, options) {
options = options || {}; options = options || {};
@ -635,45 +683,51 @@ $.Viewport.prototype = {
newBounds.y = center.y - newBounds.height / 2; newBounds.y = center.y - newBounds.height / 2;
var newZoom = 1.0 / newBounds.width; 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) { if (immediately) {
this.panTo(center, true); 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); var currentCenter = this.getCenter(true);
this.zoomTo(this.getZoom(true), null, true); var currentZoom = this.getZoom(true);
this.panTo(currentCenter, true);
this.zoomTo(currentZoom, null, true);
var oldBounds = this.getBounds(); var oldBounds = this.getBounds();
var oldZoom = this.getZoom(); var oldZoom = this.getZoom();
if (oldZoom === 0 || Math.abs(newZoom / oldZoom - 1) < 0.00000001) { if (oldZoom === 0 || Math.abs(newZoom / oldZoom - 1) < 0.00000001) {
this.zoomTo(newZoom, true); this.zoomTo(newZoom, null, true);
return this.panTo(center, immediately); this.panTo(center, immediately);
if(constraints){
this.applyConstraints(false);
}
return this;
} }
newBounds = newBounds.rotate(-this.getRotation()); if(constraints){
var referencePoint = newBounds.getTopLeft().times(newZoom) this.panTo(center, false);
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)) .minus(oldBounds.getTopLeft().times(oldZoom))
.divide(newZoom - oldZoom); .divide(newZoom - oldZoom);
return this.zoomTo(newZoom, referencePoint, immediately); this.zoomTo(newZoom, referencePoint, immediately);
}
return this;
}, },
/** /**
@ -686,7 +740,7 @@ $.Viewport.prototype = {
* @function * @function
* @param {OpenSeadragon.Rect} bounds * @param {OpenSeadragon.Rect} bounds
* @param {Boolean} [immediately=false] * @param {Boolean} [immediately=false]
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
*/ */
fitBounds: function(bounds, immediately) { fitBounds: function(bounds, immediately) {
return this._fitBounds(bounds, { return this._fitBounds(bounds, {
@ -705,7 +759,7 @@ $.Viewport.prototype = {
* @function * @function
* @param {OpenSeadragon.Rect} bounds * @param {OpenSeadragon.Rect} bounds
* @param {Boolean} [immediately=false] * @param {Boolean} [immediately=false]
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
*/ */
fitBoundsWithConstraints: function(bounds, immediately) { fitBoundsWithConstraints: function(bounds, immediately) {
return this._fitBounds(bounds, { return this._fitBounds(bounds, {
@ -717,7 +771,7 @@ $.Viewport.prototype = {
/** /**
* Zooms so the image just fills the viewer vertically. * Zooms so the image just fills the viewer vertically.
* @param {Boolean} immediately * @param {Boolean} immediately
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
*/ */
fitVertically: function(immediately) { fitVertically: function(immediately) {
var box = new $.Rect( var box = new $.Rect(
@ -731,7 +785,7 @@ $.Viewport.prototype = {
/** /**
* Zooms so the image just fills the viewer horizontally. * Zooms so the image just fills the viewer horizontally.
* @param {Boolean} immediately * @param {Boolean} immediately
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
*/ */
fitHorizontally: function(immediately) { fitHorizontally: function(immediately) {
var box = new $.Rect( var box = new $.Rect(
@ -747,7 +801,10 @@ $.Viewport.prototype = {
* Returns bounds taking constraints into account * Returns bounds taking constraints into account
* Added to improve constrained panning * Added to improve constrained panning
* @param {Boolean} current - Pass true for the current location; defaults to false (target location). * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
* @return {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) { getConstrainedBounds: function(current) {
var bounds, var bounds,
@ -764,7 +821,7 @@ $.Viewport.prototype = {
* @function * @function
* @param {OpenSeadragon.Point} delta * @param {OpenSeadragon.Point} delta
* @param {Boolean} immediately * @param {Boolean} immediately
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:pan * @fires OpenSeadragon.Viewer.event:pan
*/ */
panBy: function( delta, immediately ) { panBy: function( delta, immediately ) {
@ -779,7 +836,7 @@ $.Viewport.prototype = {
* @function * @function
* @param {OpenSeadragon.Point} center * @param {OpenSeadragon.Point} center
* @param {Boolean} immediately * @param {Boolean} immediately
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:pan * @fires OpenSeadragon.Viewer.event:pan
*/ */
panTo: function( center, immediately ) { panTo: function( center, immediately ) {
@ -814,7 +871,7 @@ $.Viewport.prototype = {
/** /**
* @function * @function
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:zoom * @fires OpenSeadragon.Viewer.event:zoom
*/ */
zoomBy: function(factor, refPoint, immediately) { zoomBy: function(factor, refPoint, immediately) {
@ -829,7 +886,7 @@ $.Viewport.prototype = {
* @param {OpenSeadragon.Point} [refPoint] The point which will stay at * @param {OpenSeadragon.Point} [refPoint] The point which will stay at
* the same screen location. Defaults to the viewport center. * the same screen location. Defaults to the viewport center.
* @param {Boolean} [immediately=false] * @param {Boolean} [immediately=false]
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:zoom * @fires OpenSeadragon.Viewer.event:zoom
*/ */
zoomTo: function(zoom, refPoint, immediately) { zoomTo: function(zoom, refPoint, immediately) {
@ -876,13 +933,90 @@ $.Viewport.prototype = {
* Rotates this viewport to the angle specified. * Rotates this viewport to the angle specified.
* @function * @function
* @param {Number} degrees The degrees to set the rotation to. * @param {Number} degrees The degrees to set the rotation to.
* @return {OpenSeadragon.Viewport} Chainable. * @param {Boolean} [immediately=false] Whether to animate to the new angle
* or rotate immediately.
* * @returns {OpenSeadragon.Viewport} Chainable.
*/ */
setRotation: function(degrees) { setRotation: function(degrees, immediately) {
return this.rotateTo(degrees, null, immediately);
},
/**
* Gets the current rotation in degrees.
* @function
* @param {Boolean} [current=false] True for current rotation, false for target.
* @returns {Number} The current rotation in degrees.
*/
getRotation: function(current) {
return current ?
this.degreesSpring.current.value :
this.degreesSpring.target.value;
},
/**
* Rotates this viewport to the angle specified around a pivot point. Alias for rotateTo.
* @function
* @param {Number} degrees The degrees to set the rotation to.
* @param {OpenSeadragon.Point} [pivot] (Optional) point in viewport coordinates
* around which the rotation should be performed. Defaults to the center of the viewport.
* @param {Boolean} [immediately=false] Whether to animate to the new angle
* or rotate immediately.
* * @returns {OpenSeadragon.Viewport} Chainable.
*/
setRotationWithPivot: function(degrees, pivot, immediately) {
return this.rotateTo(degrees, pivot, immediately);
},
/**
* Rotates this viewport to the angle specified.
* @function
* @param {Number} degrees The degrees to set the rotation to.
* @param {OpenSeadragon.Point} [pivot] (Optional) point in viewport coordinates
* around which the rotation should be performed. Defaults to the center of the viewport.
* @param {Boolean} [immediately=false] Whether to animate to the new angle
* or rotate immediately.
* @returns {OpenSeadragon.Viewport} Chainable.
*/
rotateTo: function(degrees, pivot, immediately){
if (!this.viewer || !this.viewer.drawer.canRotate()) { if (!this.viewer || !this.viewer.drawer.canRotate()) {
return this; return this;
} }
this.degrees = $.positiveModulo(degrees, 360);
if (this.degreesSpring.target.value === degrees &&
this.degreesSpring.isAtTargetValue()) {
return this;
}
this.rotationPivot = pivot instanceof $.Point &&
!isNaN(pivot.x) &&
!isNaN(pivot.y) ?
pivot :
null;
if (immediately) {
if(this.rotationPivot){
var changeInDegrees = degrees - this._oldDegrees;
if(!changeInDegrees){
this.rotationPivot = null;
return this;
}
this._rotateAboutPivot(degrees);
} else{
this.degreesSpring.resetTo(degrees);
}
} else {
var normalizedFrom = $.positiveModulo(this.degreesSpring.current.value, 360);
var normalizedTo = $.positiveModulo(degrees, 360);
var diff = normalizedTo - normalizedFrom;
if (diff > 180) {
normalizedTo -= 360;
} else if (diff < -180) {
normalizedTo += 360;
}
var reverseDiff = normalizedFrom - normalizedTo;
this.degreesSpring.resetTo(degrees + reverseDiff);
this.degreesSpring.springTo(degrees);
}
this._setContentBounds( this._setContentBounds(
this.viewer.world.getHomeBounds(), this.viewer.world.getHomeBounds(),
this.viewer.world.getContentFactor()); this.viewer.world.getContentFactor());
@ -896,24 +1030,31 @@ $.Viewport.prototype = {
* @type {object} * @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
* @property {Number} degrees - The number of degrees the rotation was set to. * @property {Number} degrees - The number of degrees the rotation was set to.
* @property {Boolean} immediately - Whether the rotation happened immediately or was animated
* @property {OpenSeadragon.Point} pivot - The point in viewport coordinates around which the rotation (if any) happened
* @property {?Object} userData - Arbitrary subscriber-defined object. * @property {?Object} userData - Arbitrary subscriber-defined object.
*/ */
this.viewer.raiseEvent('rotate', {degrees: degrees}); this.viewer.raiseEvent('rotate', {degrees: degrees, immediately: !!immediately, pivot: this.rotationPivot || this.getCenter()});
return this; return this;
}, },
/** /**
* Gets the current rotation in degrees. * Rotates this viewport by the angle specified.
* @function * @function
* @return {Number} The current rotation in degrees. * @param {Number} degrees The degrees by which to rotate the viewport.
* @param {OpenSeadragon.Point} [pivot] (Optional) point in viewport coordinates
* around which the rotation should be performed. Defaults to the center of the viewport.
* * @param {Boolean} [immediately=false] Whether to animate to the new angle
* or rotate immediately.
* @returns {OpenSeadragon.Viewport} Chainable.
*/ */
getRotation: function() { rotateBy: function(degrees, pivot, immediately){
return this.degrees; return this.rotateTo(this.degreesSpring.target.value + degrees, pivot, immediately);
}, },
/** /**
* @function * @function
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
* @fires OpenSeadragon.Viewer.event:resize * @fires OpenSeadragon.Viewer.event:resize
*/ */
resize: function( newContainerSize, maintain ) { resize: function( newContainerSize, maintain ) {
@ -963,7 +1104,7 @@ $.Viewport.prototype = {
}, },
/** /**
* Update the zoom and center (X and Y) springs. * Update the zoom, degrees, and center (X and Y) springs.
* @function * @function
* @returns {Boolean} True if any change has been made, false otherwise. * @returns {Boolean} True if any change has been made, false otherwise.
*/ */
@ -972,21 +1113,55 @@ $.Viewport.prototype = {
this._adjustCenterSpringsForZoomPoint(function() { this._adjustCenterSpringsForZoomPoint(function() {
_this.zoomSpring.update(); _this.zoomSpring.update();
}); });
if(this.degreesSpring.isAtTargetValue()){
this.rotationPivot = null;
}
this.centerSpringX.update(); this.centerSpringX.update();
this.centerSpringY.update(); this.centerSpringY.update();
if(this.rotationPivot){
this._rotateAboutPivot(true);
}
else{
this.degreesSpring.update();
}
var changed = this.centerSpringX.current.value !== this._oldCenterX || var changed = this.centerSpringX.current.value !== this._oldCenterX ||
this.centerSpringY.current.value !== this._oldCenterY || this.centerSpringY.current.value !== this._oldCenterY ||
this.zoomSpring.current.value !== this._oldZoom; this.zoomSpring.current.value !== this._oldZoom ||
this.degreesSpring.current.value !== this._oldDegrees;
this._oldCenterX = this.centerSpringX.current.value; this._oldCenterX = this.centerSpringX.current.value;
this._oldCenterY = this.centerSpringY.current.value; this._oldCenterY = this.centerSpringY.current.value;
this._oldZoom = this.zoomSpring.current.value; this._oldZoom = this.zoomSpring.current.value;
this._oldDegrees = this.degreesSpring.current.value;
return changed; return changed;
}, },
// private - pass true to use spring, or a number for degrees for immediate rotation
_rotateAboutPivot: function(degreesOrUseSpring){
var useSpring = degreesOrUseSpring === true;
var delta = this.rotationPivot.minus(this.getCenter());
this.centerSpringX.shiftBy(delta.x);
this.centerSpringY.shiftBy(delta.y);
if(useSpring){
this.degreesSpring.update();
} else {
this.degreesSpring.resetTo(degreesOrUseSpring);
}
var changeInDegrees = this.degreesSpring.current.value - this._oldDegrees;
var rdelta = delta.rotate(changeInDegrees * -1).times(-1);
this.centerSpringX.shiftBy(rdelta.x);
this.centerSpringY.shiftBy(rdelta.y);
},
// private
_adjustCenterSpringsForZoomPoint: function(zoomSpringHandler) { _adjustCenterSpringsForZoomPoint: function(zoomSpringHandler) {
if (this.zoomPoint) { if (this.zoomPoint) {
var oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true); var oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true);
@ -1033,7 +1208,7 @@ $.Viewport.prototype = {
*/ */
deltaPixelsFromPoints: function(deltaPoints, current) { deltaPixelsFromPoints: function(deltaPoints, current) {
return this.deltaPixelsFromPointsNoRotate( return this.deltaPixelsFromPointsNoRotate(
deltaPoints.rotate(this.getRotation()), deltaPoints.rotate(this.getRotation(current)),
current); current);
}, },
@ -1062,7 +1237,7 @@ $.Viewport.prototype = {
*/ */
deltaPointsFromPixels: function(deltaPixels, current) { deltaPointsFromPixels: function(deltaPixels, current) {
return this.deltaPointsFromPixelsNoRotate(deltaPixels, current) return this.deltaPointsFromPixelsNoRotate(deltaPixels, current)
.rotate(-this.getRotation()); .rotate(-this.getRotation(current));
}, },
/** /**
@ -1104,7 +1279,7 @@ $.Viewport.prototype = {
// private // private
_pixelFromPoint: function(point, bounds) { _pixelFromPoint: function(point, bounds) {
return this._pixelFromPointNoRotate( return this._pixelFromPointNoRotate(
point.rotate(this.getRotation(), this.getCenter(true)), point.rotate(this.getRotation(true), this.getCenter(true)),
bounds); bounds);
}, },
@ -1137,8 +1312,8 @@ $.Viewport.prototype = {
*/ */
pointFromPixel: function(pixel, current) { pointFromPixel: function(pixel, current) {
return this.pointFromPixelNoRotate(pixel, current).rotate( return this.pointFromPixelNoRotate(pixel, current).rotate(
-this.getRotation(), -this.getRotation(current),
this.getCenter(true) this.getCenter(current)
); );
}, },
@ -1159,7 +1334,7 @@ $.Viewport.prototype = {
* @param {(OpenSeadragon.Point|Number)} viewerX either a point or the X * @param {(OpenSeadragon.Point|Number)} viewerX either a point or the X
* coordinate in viewport coordinate system. * coordinate in viewport coordinate system.
* @param {Number} [viewerY] Y coordinate in viewport coordinate system. * @param {Number} [viewerY] Y coordinate in viewport coordinate system.
* @return {OpenSeadragon.Point} a point representing the coordinates in the image. * @returns {OpenSeadragon.Point} a point representing the coordinates in the image.
*/ */
viewportToImageCoordinates: function(viewerX, viewerY) { viewportToImageCoordinates: function(viewerX, viewerY) {
if (viewerX instanceof $.Point) { if (viewerX instanceof $.Point) {
@ -1170,8 +1345,10 @@ $.Viewport.prototype = {
if (this.viewer) { if (this.viewer) {
var count = this.viewer.world.getItemCount(); var count = this.viewer.world.getItemCount();
if (count > 1) { if (count > 1) {
if (!this.silenceMultiImageWarnings) {
$.console.error('[Viewport.viewportToImageCoordinates] is not accurate ' + $.console.error('[Viewport.viewportToImageCoordinates] is not accurate ' +
'with multi-image; use TiledImage.viewportToImageCoordinates instead.'); 'with multi-image; use TiledImage.viewportToImageCoordinates instead.');
}
} else if (count === 1) { } else if (count === 1) {
// It is better to use TiledImage.viewportToImageCoordinates // It is better to use TiledImage.viewportToImageCoordinates
// because this._contentBoundsNoRotate can not be relied on // because this._contentBoundsNoRotate can not be relied on
@ -1203,7 +1380,7 @@ $.Viewport.prototype = {
* @param {(OpenSeadragon.Point | Number)} imageX the point or the * @param {(OpenSeadragon.Point | Number)} imageX the point or the
* X coordinate in image coordinate system. * X coordinate in image coordinate system.
* @param {Number} [imageY] Y coordinate in image coordinate system. * @param {Number} [imageY] Y coordinate in image coordinate system.
* @return {OpenSeadragon.Point} a point representing the coordinates in the viewport. * @returns {OpenSeadragon.Point} a point representing the coordinates in the viewport.
*/ */
imageToViewportCoordinates: function(imageX, imageY) { imageToViewportCoordinates: function(imageX, imageY) {
if (imageX instanceof $.Point) { if (imageX instanceof $.Point) {
@ -1214,8 +1391,10 @@ $.Viewport.prototype = {
if (this.viewer) { if (this.viewer) {
var count = this.viewer.world.getItemCount(); var count = this.viewer.world.getItemCount();
if (count > 1) { if (count > 1) {
if (!this.silenceMultiImageWarnings) {
$.console.error('[Viewport.imageToViewportCoordinates] is not accurate ' + $.console.error('[Viewport.imageToViewportCoordinates] is not accurate ' +
'with multi-image; use TiledImage.imageToViewportCoordinates instead.'); 'with multi-image; use TiledImage.imageToViewportCoordinates instead.');
}
} else if (count === 1) { } else if (count === 1) {
// It is better to use TiledImage.viewportToImageCoordinates // It is better to use TiledImage.viewportToImageCoordinates
// because this._contentBoundsNoRotate can not be relied on // because this._contentBoundsNoRotate can not be relied on
@ -1256,8 +1435,10 @@ $.Viewport.prototype = {
if (this.viewer) { if (this.viewer) {
var count = this.viewer.world.getItemCount(); var count = this.viewer.world.getItemCount();
if (count > 1) { if (count > 1) {
if (!this.silenceMultiImageWarnings) {
$.console.error('[Viewport.imageToViewportRectangle] is not accurate ' + $.console.error('[Viewport.imageToViewportRectangle] is not accurate ' +
'with multi-image; use TiledImage.imageToViewportRectangle instead.'); 'with multi-image; use TiledImage.imageToViewportRectangle instead.');
}
} else if (count === 1) { } else if (count === 1) {
// It is better to use TiledImage.imageToViewportRectangle // It is better to use TiledImage.imageToViewportRectangle
// because this._contentBoundsNoRotate can not be relied on // because this._contentBoundsNoRotate can not be relied on
@ -1304,8 +1485,10 @@ $.Viewport.prototype = {
if (this.viewer) { if (this.viewer) {
var count = this.viewer.world.getItemCount(); var count = this.viewer.world.getItemCount();
if (count > 1) { if (count > 1) {
if (!this.silenceMultiImageWarnings) {
$.console.error('[Viewport.viewportToImageRectangle] is not accurate ' + $.console.error('[Viewport.viewportToImageRectangle] is not accurate ' +
'with multi-image; use TiledImage.viewportToImageRectangle instead.'); 'with multi-image; use TiledImage.viewportToImageRectangle instead.');
}
} else if (count === 1) { } else if (count === 1) {
// It is better to use TiledImage.viewportToImageCoordinates // It is better to use TiledImage.viewportToImageCoordinates
// because this._contentBoundsNoRotate can not be relied on // because this._contentBoundsNoRotate can not be relied on
@ -1469,8 +1652,10 @@ $.Viewport.prototype = {
if (this.viewer) { if (this.viewer) {
var count = this.viewer.world.getItemCount(); var count = this.viewer.world.getItemCount();
if (count > 1) { if (count > 1) {
if (!this.silenceMultiImageWarnings) {
$.console.error('[Viewport.viewportToImageZoom] is not ' + $.console.error('[Viewport.viewportToImageZoom] is not ' +
'accurate with multi-image.'); 'accurate with multi-image.');
}
} else if (count === 1) { } else if (count === 1) {
// It is better to use TiledImage.viewportToImageZoom // It is better to use TiledImage.viewportToImageZoom
// because this._contentBoundsNoRotate can not be relied on // because this._contentBoundsNoRotate can not be relied on
@ -1503,8 +1688,10 @@ $.Viewport.prototype = {
if (this.viewer) { if (this.viewer) {
var count = this.viewer.world.getItemCount(); var count = this.viewer.world.getItemCount();
if (count > 1) { if (count > 1) {
if (!this.silenceMultiImageWarnings) {
$.console.error('[Viewport.imageToViewportZoom] is not accurate ' + $.console.error('[Viewport.imageToViewportZoom] is not accurate ' +
'with multi-image.'); 'with multi-image.');
}
} else if (count === 1) { } else if (count === 1) {
// It is better to use TiledImage.imageToViewportZoom // It is better to use TiledImage.imageToViewportZoom
// because this._contentBoundsNoRotate can not be relied on // because this._contentBoundsNoRotate can not be relied on
@ -1524,7 +1711,7 @@ $.Viewport.prototype = {
/** /**
* Toggles flip state and demands a new drawing on navigator and viewer objects. * Toggles flip state and demands a new drawing on navigator and viewer objects.
* @function * @function
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
*/ */
toggleFlip: function() { toggleFlip: function() {
this.setFlip(!this.getFlip()); this.setFlip(!this.getFlip());
@ -1534,7 +1721,7 @@ $.Viewport.prototype = {
/** /**
* Get flip state stored on viewport. * Get flip state stored on viewport.
* @function * @function
* @return {Boolean} Flip state. * @returns {Boolean} Flip state.
*/ */
getFlip: function() { getFlip: function() {
return this.flipped; return this.flipped;
@ -1544,7 +1731,7 @@ $.Viewport.prototype = {
* Sets flip state according to the state input argument. * Sets flip state according to the state input argument.
* @function * @function
* @param {Boolean} state - Flip state to set. * @param {Boolean} state - Flip state to set.
* @return {OpenSeadragon.Viewport} Chainable. * @returns {OpenSeadragon.Viewport} Chainable.
*/ */
setFlip: function( state ) { setFlip: function( state ) {
if ( this.flipped === state ) { if ( this.flipped === state ) {

2
src/world.js
View File

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

5
src/zoomifytilesource.js
View File

@ -122,10 +122,11 @@
* @function * @function
* @param {Object} data - the raw configuration * @param {Object} data - the raw configuration
* @param {String} url - the url the data was retrieved from if any. * @param {String} url - the url the data was retrieved from if any.
* @return {Object} options - A dictionary of keyword arguments sufficient * @param {String} postData - HTTP POST data in k=v&k2=v2... form or null
* @returns {Object} options - A dictionary of keyword arguments sufficient
* to configure this tile sources constructor. * to configure this tile sources constructor.
*/ */
configure: function(data, url) { configure: function(data, url, postData) {
return data; return data;
}, },

2
test/coverage.html
View File

@ -65,6 +65,7 @@
<!-- Polyfill must be inserted first because it is testing functions <!-- Polyfill must be inserted first because it is testing functions
reassignments which could be done by other test. --> reassignments which could be done by other test. -->
<script src="/test/modules/polyfills.js"></script> <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/basic.js"></script>
<script src="/test/modules/strings.js"></script> <script src="/test/modules/strings.js"></script>
<script src="/test/modules/formats.js"></script> <script src="/test/modules/formats.js"></script>
@ -86,6 +87,7 @@
<script src="/test/modules/spring.js"></script> <script src="/test/modules/spring.js"></script>
<script src="/test/modules/rectangle.js"></script> <script src="/test/modules/rectangle.js"></script>
<script src="/test/modules/ajax-tiles.js"></script> <script src="/test/modules/ajax-tiles.js"></script>
<script src="/test/modules/ajax-post-data.js"></script>
<script src="/test/modules/imageloader.js"></script> <script src="/test/modules/imageloader.js"></script>
<script src="/test/modules/iiif.js"></script> <script src="/test/modules/iiif.js"></script>
<!-- The navigator tests are the slowest (for now; hopefully they can be sped up) <!-- The navigator tests are the slowest (for now; hopefully they can be sped up)

BIN
test/data/iiif_3_0_sizes/full/1600,1164/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

BIN
test/data/iiif_3_0_sizes/full/3200,2328/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 678 KiB

BIN
test/data/iiif_3_0_sizes/full/400,291/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
test/data/iiif_3_0_sizes/full/6976,5074/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
test/data/iiif_3_0_sizes/full/800,582/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

15
test/data/iiif_3_0_sizes/info.json Normal file
View File

@ -0,0 +1,15 @@
{
"@context": "http://iiif.io/api/image/3/context.json",
"id": "http://localhost:8000/test/data/iiif_3_0_sizes",
"protocol": "http://iiif.io/api/image",
"width": 6976,
"height": 5074,
"profile": "level0",
"sizes" : [
{"width" : 400, "height" : 291},
{"width" : 800, "height" : 582},
{"width" : 1600, "height" : 1164},
{"width" : 3200, "height": 2328},
{"width" : 6976, "height": 5074}
]
}

BIN
test/data/iiif_3_0_tiled/0,0,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
test/data/iiif_3_0_tiled/0,0,512,512/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
test/data/iiif_3_0_tiled/0,0,775,1024/194,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
test/data/iiif_3_0_tiled/0,256,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
test/data/iiif_3_0_tiled/0,512,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
test/data/iiif_3_0_tiled/0,512,512,512/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
test/data/iiif_3_0_tiled/0,768,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
test/data/iiif_3_0_tiled/256,0,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
test/data/iiif_3_0_tiled/256,256,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
test/data/iiif_3_0_tiled/256,512,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
test/data/iiif_3_0_tiled/256,768,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
test/data/iiif_3_0_tiled/512,0,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
test/data/iiif_3_0_tiled/512,0,263,512/132,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
test/data/iiif_3_0_tiled/512,256,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
test/data/iiif_3_0_tiled/512,512,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
test/data/iiif_3_0_tiled/512,512,263,512/132,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
test/data/iiif_3_0_tiled/512,768,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
test/data/iiif_3_0_tiled/768,0,7,256/7,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 717 B

BIN
test/data/iiif_3_0_tiled/768,256,7,256/7,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 716 B

BIN
test/data/iiif_3_0_tiled/768,512,7,256/7,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 717 B

BIN
test/data/iiif_3_0_tiled/768,768,7,256/7,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 712 B

BIN
test/data/iiif_3_0_tiled/full/1,/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 633 B

BIN
test/data/iiif_3_0_tiled/full/13,/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 810 B

BIN
test/data/iiif_3_0_tiled/full/2,/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 663 B

BIN
test/data/iiif_3_0_tiled/full/25,/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
test/data/iiif_3_0_tiled/full/4,/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 675 B

BIN
test/data/iiif_3_0_tiled/full/49,/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
test/data/iiif_3_0_tiled/full/7,/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 683 B

BIN
test/data/iiif_3_0_tiled/full/97,/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

11
test/data/iiif_3_0_tiled/info.json Normal file
View File

@ -0,0 +1,11 @@
{
"@context": "http://iiif.io/api/image/3/context.json",
"id": "http://localhost:8000/test/data/iiif_3_0_tiled",
"protocol": "http://iiif.io/api/image",
"height": 1024,
"width": 775,
"tiles" : [{"width":256, "scaleFactors":[1,2,4,8]}],
"profile": "level2",
"extraQualities": ["bitonal", "grey", "color"],
"extraFormats": ["jpg", "png", "gif" ]
}

BIN
test/data/iiif_3_0_tiled_sf1/0,0,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
test/data/iiif_3_0_tiled_sf1/0,256,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
test/data/iiif_3_0_tiled_sf1/0,512,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
test/data/iiif_3_0_tiled_sf1/0,768,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
test/data/iiif_3_0_tiled_sf1/256,0,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
test/data/iiif_3_0_tiled_sf1/256,256,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
test/data/iiif_3_0_tiled_sf1/256,512,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
test/data/iiif_3_0_tiled_sf1/256,768,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
test/data/iiif_3_0_tiled_sf1/512,0,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
test/data/iiif_3_0_tiled_sf1/512,256,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
test/data/iiif_3_0_tiled_sf1/512,512,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
test/data/iiif_3_0_tiled_sf1/512,768,256,256/256,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
test/data/iiif_3_0_tiled_sf1/768,0,7,256/7,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 717 B

BIN
test/data/iiif_3_0_tiled_sf1/768,256,7,256/7,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 716 B

BIN
test/data/iiif_3_0_tiled_sf1/768,512,7,256/7,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 717 B

BIN
test/data/iiif_3_0_tiled_sf1/768,768,7,256/7,256/0/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 712 B

11
test/data/iiif_3_0_tiled_sf1/info.json Normal file
View File

@ -0,0 +1,11 @@
{
"@context": "http://iiif.io/api/image/3/context.json",
"id": "http://localhost:8000/test/data/iiif_3_0_tiled_sf1",
"protocol": "http://iiif.io/api/image",
"height": 1024,
"width": 775,
"tiles" : [{"width": 256, "scaleFactors": [1]}],
"profile": "level2",
"extraQualities": ["bitonal", "grey", "color"],
"extraFormats": ["jpg", "png", "gif" ]
}

1
test/demo/basic.html
View File

@ -27,7 +27,6 @@
tileSources: "../data/testpattern.dzi", tileSources: "../data/testpattern.dzi",
showNavigator:true showNavigator:true
}); });
</script> </script>
</body> </body>
</html> </html>

200
test/demo/fitboundswithconstraints.html
View File

@ -3,110 +3,162 @@
<head> <head>
<title>OpenSeadragon fitBoundsWithConstraints() Demo</title> <title>OpenSeadragon fitBoundsWithConstraints() Demo</title>
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script> <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"> <style type="text/css">
.openseadragon1 { .openseadragon1 {
width: 800px; width: 800px;
height: 600px; height: 500px;
border:thin black solid;
margin-right:20px;
} }
#buttons button{
#highlights li { width:10em;
cursor: pointer; 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> </style>
</head> </head>
<body> <body>
<div class="layout">
<div id="contentDiv" class="openseadragon1"></div>
<div id="controls">
<div> <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>
<div id="contentDiv" class="openseadragon1"></div> <h3>Pick a method to use:</h3>
<div id="highlights"></div> <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"> <script type="text/javascript">
var _viewer; var viewer;
var _fittingMethod = 0; var _fittingMethod = 0;
viewer = window.viewer = OpenSeadragon({
var _highlights = [ id: "contentDiv",
{"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,
prefixUrl: "../../build/openseadragon/images/", prefixUrl: "../../build/openseadragon/images/",
hash: generateUniqueHash(), //this is only needed if you want to instantiate more than one viewer at a time. tileSources: "../data/testpattern.dzi",
tileSources: { minZoomImageRatio: 0,
Image: { maxZoomPixelRatio: 10,
xmlns: "http://schemas.microsoft.com/deepzoom/2008", visibilityRatio:1,
Url: 'http://cdn.photosynth.net/ps2/19d5cf2b-77ed-439f-ac21-d3046320384c/packet/undistorted/img0043/', constrainDuringPan:true,
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;
}); });
function gotoHighlight(index) { viewer.addHandler("open", function(event) {
var highlight = _highlights[index]; 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; elt = document.createElement("div");
var contentSize = viewport.contentSize; elt.className = "runtime-overlay";
var scaling = 1.0 / viewport.viewportToImageZoom(viewport.getZoom()); elt.style.background = "white";
var radius = highlight.radius*Math.min(contentSize.x, contentSize.y);/*annotation.accurateRadius*scaling;*/ elt.style.opacity = "0.5";
var center = new OpenSeadragon.Point(contentSize.x*highlight.queryPoint[0], contentSize.y*highlight.queryPoint[1]); elt.style.outline = "5px solid pink";
var bounds = viewport.imageToViewportRectangle(new OpenSeadragon.Rect(center.x-radius, center.y-radius, radius*2, radius*2)); 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) { if (_fittingMethod === 0) {
viewport.fitBoundsWithConstraints(bounds, false); viewer.viewport.fitBounds(bounds, false);
} }
else if (_fittingMethod === 1) { 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) { else if (_fittingMethod === 2) {
viewport.fitBounds(bounds, false).applyConstraints(); viewer.viewport.fitBounds(bounds, false);
} setTimeout(()=>viewer.viewport.applyConstraints(), 1000);
} }
});
})
function changeMethod(value) { viewer.viewport.zoomTo(0.5, null, true);
_fittingMethod = parseInt(value, 10);
}
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> </script>
</body> </body>

2
test/demo/iiif.html
View File

@ -25,7 +25,7 @@
// debugMode: true, // debugMode: true,
id: "contentDiv", id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/", prefixUrl: "../../build/openseadragon/images/",
tileSources: "http://wellcomelibrary.org/iiif-img/b11768265-0/a6801943-b8b4-4674-908c-7d5b27e70569/info.json", tileSources: "../data/iiif_2_0_tiled/info.json",
showNavigator:true showNavigator:true
}); });

Some files were not shown because too many files have changed in this diff Show More