mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-23 13:46:09 +03:00
Merge branch 'master' into pr-1386-2
This commit is contained in:
Ian Gilman
commit
12cb68b7b9
@ -50,6 +50,7 @@
|
||||
"no-multi-spaces": [
|
||||
"error",
|
||||
{
|
||||
"ignoreEOLComments": true,
|
||||
"exceptions": {
|
||||
"Property": true,
|
||||
"VariableDeclarator": true,
|
||||
@ -259,7 +260,7 @@
|
||||
"space-unary-ops": [
|
||||
"error",
|
||||
{
|
||||
"words": false,
|
||||
"words": true,
|
||||
"nonwords": false
|
||||
}
|
||||
],
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -7,3 +7,4 @@ instrumented/
|
||||
.idea
|
||||
/nbproject/private/
|
||||
.directory
|
||||
test/demo/temp
|
||||
|
||||
@ -1,13 +1,35 @@
|
||||
OPENSEADRAGON CHANGELOG
|
||||
=======================
|
||||
|
||||
2.4.0: (In Progress)
|
||||
2.4.1: (In progress)
|
||||
|
||||
* You can now turn off the default canvas image smoothing, if you want sharp pixels when zoomed in past 100% (#1507, #1595)
|
||||
* Fixed problem with navigator highlight rectangle when returning from full screen with a custom navigator location (#1515)
|
||||
* Added option to set rotation increment for nav buttons and keyboard (#1524)
|
||||
* Fixed issue with flipping and opacity with multi-image (#1549)
|
||||
* Removed vestigial button group label element that was causing issues for accessibility tools (#1560)
|
||||
* Fixed a bug causing Viewer.areControlsEnabled to throw an exception (#1562)
|
||||
* Added tileFormat option to IIIFTileSource so you can specify the tile format (#1625)
|
||||
|
||||
2.4.0:
|
||||
|
||||
* BREAKING CHANGE: Viewer's canvas-double-click event is now fired before it initiates the zoom (#1288)
|
||||
* You can now flip the viewport to get a mirror image of the original (#1441)
|
||||
* You can now prevent canvas-double-click events from zooming on a per-event basis (#1288)
|
||||
* Fixed: Opacity 0 images were causing unnecessary redraws (#1319)
|
||||
* The "page" event is now fired after the page index has been updated (#1330)
|
||||
* Added option pixelsPerArrowPress that sets the speed of arrow keys (#1364)
|
||||
* Improved IIIF options.maxLevel calculation (#1401)
|
||||
* Added canvas-key events, along with the ability to cancel key actions (#1414)
|
||||
* Added optional zoom in the middle of the image instead of pointer position (#1423)
|
||||
* Now supporting square edge tiles that are padded rather than cropped (#1426)
|
||||
* Fixed an issue causing the simple image tileSource to sometimes show duplicate copies (#1370)
|
||||
* Fixed an issue causing seams to appear in semi-transparent PNG tiled images (#1470)
|
||||
* Added visual customization options for the navigator (#1480)
|
||||
* You can now prevent canvas-drag events on the navigator (#1484)
|
||||
* You can now prevent canvas-click events on the navigator (#1416)
|
||||
* The navigator can now be restricted to just horizontal or just vertical panning (#1416)
|
||||
* Fixed DziTileSource so it doesn't load levels above maxLevel or below minLevel, if set (#1492)
|
||||
|
||||
2.3.1:
|
||||
|
||||
|
||||
BIN
images/flip_grouphover.png
Normal file
BIN
images/flip_grouphover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
images/flip_hover.png
Normal file
BIN
images/flip_hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
images/flip_pressed.png
Normal file
BIN
images/flip_pressed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
images/flip_rest.png
Normal file
BIN
images/flip_rest.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
6313
package-lock.json
generated
Normal file
6313
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "openseadragon",
|
||||
"version": "2.3.1",
|
||||
"version": "2.4.0",
|
||||
"description": "Provides a smooth, zoomable user interface for HTML/Javascript.",
|
||||
"keywords": [
|
||||
"image",
|
||||
@ -28,16 +28,16 @@
|
||||
"url": "https://github.com/openseadragon/openseadragon.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "^1.0.1",
|
||||
"grunt": "^1.0.3",
|
||||
"grunt-contrib-clean": "^1.1.0",
|
||||
"grunt-contrib-compress": "^1.4.3",
|
||||
"grunt-contrib-concat": "^1.0.1",
|
||||
"grunt-contrib-connect": "^1.0.2",
|
||||
"grunt-contrib-qunit": "^2.0.0",
|
||||
"grunt-contrib-uglify": "^3.2.1",
|
||||
"grunt-contrib-watch": "^1.0.0",
|
||||
"grunt-eslint": "^19.0.0",
|
||||
"grunt-git-describe": "^2.3.2",
|
||||
"grunt-contrib-uglify": "^3.4.0",
|
||||
"grunt-contrib-watch": "^1.1.0",
|
||||
"grunt-eslint": "^20.2.0",
|
||||
"grunt-git-describe": "^2.4.4",
|
||||
"grunt-istanbul": "^0.8.0",
|
||||
"grunt-text-replace": "^0.4.0",
|
||||
"qunitjs": "2.4.1"
|
||||
|
||||
@ -70,11 +70,11 @@ $.ButtonGroup = function( options ) {
|
||||
|
||||
// TODO What if there IS an options.group specified?
|
||||
if( !options.group ){
|
||||
this.label = $.makeNeutralElement( "label" );
|
||||
this.element.style.display = "inline-block";
|
||||
//this.label = $.makeNeutralElement( "label" );
|
||||
//TODO: support labels for ButtonGroups
|
||||
//this.label.innerHTML = this.labelText;
|
||||
this.element.style.display = "inline-block";
|
||||
this.element.appendChild( this.label );
|
||||
//this.element.appendChild( this.label );
|
||||
for ( i = 0; i < buttons.length; i++ ) {
|
||||
this.element.appendChild( buttons[ i ].element );
|
||||
}
|
||||
@ -83,7 +83,7 @@ $.ButtonGroup = function( options ) {
|
||||
$.setElementTouchActionNone( this.element );
|
||||
|
||||
/**
|
||||
* Tracks mouse/touch/key events accross the group of buttons.
|
||||
* Tracks mouse/touch/key events across the group of buttons.
|
||||
* @member {OpenSeadragon.MouseTracker} tracker
|
||||
* @memberof OpenSeadragon.ButtonGroup#
|
||||
*/
|
||||
|
||||
@ -167,7 +167,7 @@ $.Control.prototype = {
|
||||
/**
|
||||
* Determines if the control is currently visible.
|
||||
* @function
|
||||
* @return {Boolean} true if currenly visible, false otherwise.
|
||||
* @return {Boolean} true if currently visible, false otherwise.
|
||||
*/
|
||||
isVisible: function() {
|
||||
return this.wrapper.style.display != "none";
|
||||
|
||||
@ -48,7 +48,7 @@ $.Drawer = function( options ) {
|
||||
|
||||
$.console.assert( options.viewer, "[Drawer] options.viewer is required" );
|
||||
|
||||
//backward compatibility for positional args while prefering more
|
||||
//backward compatibility for positional args while preferring more
|
||||
//idiomatic javascript options object as the only argument
|
||||
var args = arguments;
|
||||
|
||||
@ -130,6 +130,10 @@ $.Drawer = function( options ) {
|
||||
// explicit left-align
|
||||
this.container.style.textAlign = "left";
|
||||
this.container.appendChild( this.canvas );
|
||||
|
||||
// Image smoothing for canvas rendering (only if canvas is used).
|
||||
// Canvas default is "true", so this will only be changed if user specified "false".
|
||||
this._imageSmoothingEnabled = true;
|
||||
};
|
||||
|
||||
/** @lends OpenSeadragon.Drawer.prototype */
|
||||
@ -254,6 +258,7 @@ $.Drawer.prototype = {
|
||||
this.sketchCanvas.width = sketchCanvasSize.x;
|
||||
this.sketchCanvas.height = sketchCanvasSize.y;
|
||||
}
|
||||
this._updateImageSmoothingEnabled();
|
||||
}
|
||||
this._clear();
|
||||
}
|
||||
@ -508,6 +513,11 @@ $.Drawer.prototype = {
|
||||
tiledImage._getRotationPoint(true), true)
|
||||
});
|
||||
}
|
||||
if (tiledImage.viewport.degrees === 0 && tiledImage.getRotation(true) % 360 === 0){
|
||||
if(tiledImage._drawer.viewer.viewport.getFlip()) {
|
||||
tiledImage._drawer._flip();
|
||||
}
|
||||
}
|
||||
|
||||
context.strokeRect(
|
||||
tile.position.x * $.pixelDensityRatio,
|
||||
@ -573,6 +583,13 @@ $.Drawer.prototype = {
|
||||
if (tiledImage.getRotation(true) % 360 !== 0) {
|
||||
this._restoreRotationChanges();
|
||||
}
|
||||
|
||||
if (tiledImage.viewport.degrees === 0 && tiledImage.getRotation(true) % 360 === 0){
|
||||
if(tiledImage._drawer.viewer.viewport.getFlip()) {
|
||||
tiledImage._drawer._flip();
|
||||
}
|
||||
}
|
||||
|
||||
context.restore();
|
||||
},
|
||||
|
||||
@ -596,6 +613,31 @@ $.Drawer.prototype = {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Turns image smoothing on or off for this viewer. Note: Ignored in some (especially older) browsers that do not support this property.
|
||||
*
|
||||
* @function
|
||||
* @param {Boolean} [imageSmoothingEnabled] - Whether or not the image is
|
||||
* drawn smoothly on the canvas; see imageSmoothingEnabled in
|
||||
* {@link OpenSeadragon.Options} for more explanation.
|
||||
*/
|
||||
setImageSmoothingEnabled: function(imageSmoothingEnabled){
|
||||
if ( this.useCanvas ) {
|
||||
this._imageSmoothingEnabled = imageSmoothingEnabled;
|
||||
this._updateImageSmoothingEnabled();
|
||||
this.viewer.forceRedraw();
|
||||
}
|
||||
},
|
||||
|
||||
// private
|
||||
_updateImageSmoothingEnabled: function(){
|
||||
var context = this.context;
|
||||
context.mozImageSmoothingEnabled = this._imageSmoothingEnabled;
|
||||
context.webkitImageSmoothingEnabled = this._imageSmoothingEnabled;
|
||||
context.msImageSmoothingEnabled = this._imageSmoothingEnabled;
|
||||
context.imageSmoothingEnabled = this._imageSmoothingEnabled;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the canvas size
|
||||
* @param {Boolean} sketch If set to true return the size of the sketch canvas
|
||||
@ -620,10 +662,28 @@ $.Drawer.prototype = {
|
||||
context.save();
|
||||
|
||||
context.translate(point.x, point.y);
|
||||
if(this.viewer.viewport.flipped){
|
||||
context.rotate(Math.PI / 180 * -options.degrees);
|
||||
context.scale(-1, 1);
|
||||
} else{
|
||||
context.rotate(Math.PI / 180 * options.degrees);
|
||||
}
|
||||
context.translate(-point.x, -point.y);
|
||||
},
|
||||
|
||||
// private
|
||||
_flip: function(options) {
|
||||
options = options || {};
|
||||
var point = options.point ?
|
||||
options.point.times($.pixelDensityRatio) :
|
||||
this.getCanvasCenter();
|
||||
var context = this._getContext(options.useSketch);
|
||||
|
||||
context.translate(point.x, 0);
|
||||
context.scale(-1, 1);
|
||||
context.translate(-point.x, 0);
|
||||
},
|
||||
|
||||
// private
|
||||
_restoreRotationChanges: function(useSketch) {
|
||||
var context = this._getContext(useSketch);
|
||||
@ -635,8 +695,9 @@ $.Drawer.prototype = {
|
||||
var pixelDensityRatio = $.pixelDensityRatio;
|
||||
var viewportSize = this.viewport.getContainerSize();
|
||||
return {
|
||||
x: viewportSize.x * pixelDensityRatio,
|
||||
y: viewportSize.y * pixelDensityRatio
|
||||
// canvas width and height are integers
|
||||
x: Math.round(viewportSize.x * pixelDensityRatio),
|
||||
y: Math.round(viewportSize.y * pixelDensityRatio)
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@ -123,7 +123,7 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
|
||||
*
|
||||
* @function
|
||||
* @param {Object|XMLDocument} data - the raw configuration
|
||||
* @param {String} url - the url the data was retreived from if any.
|
||||
* @param {String} url - the url the data was retrieved from if any.
|
||||
* @return {Object} options - A dictionary of keyword arguments sufficient
|
||||
* to configure this tile sources constructor.
|
||||
*/
|
||||
@ -182,6 +182,10 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
|
||||
yMax,
|
||||
i;
|
||||
|
||||
if ((this.minLevel && level < this.minLevel) || (this.maxLevel && level > this.maxLevel)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( !rects || !rects.length ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -42,6 +42,8 @@
|
||||
* @memberof OpenSeadragon
|
||||
* @extends OpenSeadragon.TileSource
|
||||
* @see http://iiif.io/api/image/
|
||||
* @param {String} [options.tileFormat='jpg']
|
||||
* The extension that will be used when requiring tiles.
|
||||
*/
|
||||
$.IIIFTileSource = function( options ){
|
||||
|
||||
@ -55,6 +57,8 @@ $.IIIFTileSource = function( options ){
|
||||
|
||||
options.tileSizePerScaleFactor = {};
|
||||
|
||||
this.tileFormat = this.tileFormat || 'jpg';
|
||||
|
||||
// N.B. 2.0 renamed scale_factors to scaleFactors
|
||||
if ( this.tile_width && this.tile_height ) {
|
||||
options.tileWidth = this.tile_width;
|
||||
@ -127,7 +131,8 @@ $.IIIFTileSource = function( options ){
|
||||
if (!this.scale_factors) {
|
||||
options.maxLevel = Number(Math.ceil(Math.log(Math.max(this.width, this.height), 2)));
|
||||
} else {
|
||||
options.maxLevel = Math.floor(Math.pow(Math.max.apply(null, this.scale_factors), 0.5));
|
||||
var maxScaleFactor = Math.max.apply(null, this.scale_factors);
|
||||
options.maxLevel = Math.round(Math.log(maxScaleFactor) * Math.LOG2E);
|
||||
}
|
||||
}
|
||||
|
||||
@ -336,33 +341,47 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
|
||||
iiifTileW,
|
||||
iiifTileH,
|
||||
iiifSize,
|
||||
iiifSizeW,
|
||||
iiifQuality,
|
||||
uri;
|
||||
uri,
|
||||
isv1;
|
||||
|
||||
tileWidth = this.getTileWidth(level);
|
||||
tileHeight = this.getTileHeight(level);
|
||||
iiifTileSizeWidth = Math.ceil( tileWidth / scale );
|
||||
iiifTileSizeHeight = Math.ceil( tileHeight / scale );
|
||||
|
||||
if ( this['@context'].indexOf('/1.0/context.json') > -1 ||
|
||||
isv1 = ( this['@context'].indexOf('/1.0/context.json') > -1 ||
|
||||
this['@context'].indexOf('/1.1/context.json') > -1 ||
|
||||
this['@context'].indexOf('/1/context.json') > -1 ) {
|
||||
iiifQuality = "native.jpg";
|
||||
this['@context'].indexOf('/1/context.json') > -1 );
|
||||
if (isv1) {
|
||||
iiifQuality = "native." + this.tileFormat;
|
||||
} else {
|
||||
iiifQuality = "default.jpg";
|
||||
iiifQuality = "default." + this.tileFormat;
|
||||
}
|
||||
|
||||
if ( levelWidth < tileWidth && levelHeight < tileHeight ){
|
||||
if ( isv1 || levelWidth !== this.width ) {
|
||||
iiifSize = levelWidth + ",";
|
||||
} else {
|
||||
iiifSize = "max";
|
||||
}
|
||||
iiifRegion = 'full';
|
||||
} else {
|
||||
iiifTileX = x * iiifTileSizeWidth;
|
||||
iiifTileY = y * iiifTileSizeHeight;
|
||||
iiifTileW = Math.min( iiifTileSizeWidth, this.width - iiifTileX );
|
||||
iiifTileH = Math.min( iiifTileSizeHeight, this.height - iiifTileY );
|
||||
iiifSize = Math.ceil( iiifTileW * scale ) + ",";
|
||||
if ( x === 0 && y === 0 && iiifTileW === this.width && iiifTileH === this.height ) {
|
||||
iiifRegion = "full";
|
||||
} else {
|
||||
iiifRegion = [ iiifTileX, iiifTileY, iiifTileW, iiifTileH ].join( ',' );
|
||||
}
|
||||
iiifSizeW = Math.ceil( iiifTileW * scale );
|
||||
if ( (!isv1) && iiifSizeW === this.width ) {
|
||||
iiifSize = "max";
|
||||
} else {
|
||||
iiifSize = iiifSizeW + ",";
|
||||
}
|
||||
}
|
||||
uri = [ this['@id'], iiifRegion, iiifSize, IIIF_ROTATION, iiifQuality ].join( '/' );
|
||||
|
||||
return uri;
|
||||
@ -373,7 +392,7 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
|
||||
/**
|
||||
* Determine whether arbitrary tile requests can be made against a service with the given profile
|
||||
* @function
|
||||
* @param {object} profile - IIIF profile object
|
||||
* @param {array} profile - IIIF profile array
|
||||
* @throws {Error}
|
||||
*/
|
||||
function canBeTiled ( profile ) {
|
||||
@ -382,8 +401,12 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
|
||||
"http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level0",
|
||||
"http://iiif.io/api/image/2/level0.json"
|
||||
];
|
||||
var isLevel0 = (level0Profiles.indexOf(profile[0]) != -1);
|
||||
return !isLevel0 || (profile.indexOf("sizeByW") != -1);
|
||||
var isLevel0 = (level0Profiles.indexOf(profile[0]) !== -1);
|
||||
var hasSizeByW = false;
|
||||
if ( profile.length > 1 && profile[1].supports ) {
|
||||
hasSizeByW = profile[1].supports.indexOf( "sizeByW" ) !== -1;
|
||||
}
|
||||
return !isLevel0 || hasSizeByW;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -396,7 +419,7 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
|
||||
var levels = [];
|
||||
for(var i = 0; i < options.sizes.length; i++) {
|
||||
levels.push({
|
||||
url: options['@id'] + '/full/' + options.sizes[i].width + ',/0/default.jpg',
|
||||
url: options['@id'] + '/full/' + options.sizes[i].width + ',/0/default.' + options.tileFormat,
|
||||
width: options.sizes[i].width,
|
||||
height: options.sizes[i].height
|
||||
});
|
||||
|
||||
@ -88,7 +88,7 @@ ImageJob.prototype = {
|
||||
};
|
||||
|
||||
this.jobId = window.setTimeout(function(){
|
||||
self.errorMsg = "Image load exceeded timeout";
|
||||
self.errorMsg = "Image load exceeded timeout (" + self.timeout + " ms)";
|
||||
self.finish(false);
|
||||
}, this.timeout);
|
||||
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
*
|
||||
* @function
|
||||
* @param {Object} options - the options
|
||||
* @param {String} dataUrl - the url the image was retreived from, if any.
|
||||
* @param {String} dataUrl - the url the image was retrieved from, if any.
|
||||
* @return {Object} options - A dictionary of keyword arguments sufficient
|
||||
* to configure this tile sources constructor.
|
||||
*/
|
||||
@ -198,7 +198,7 @@
|
||||
|
||||
// private
|
||||
//
|
||||
// Builds the differents levels of the pyramid if possible
|
||||
// Builds the different levels of the pyramid if possible
|
||||
// (i.e. if canvas API enabled and no canvas tainting issue).
|
||||
_buildLevels: function () {
|
||||
var levels = [{
|
||||
|
||||
@ -121,7 +121,7 @@ $.extend( $.LegacyTileSource.prototype, $.TileSource.prototype, /** @lends OpenS
|
||||
*
|
||||
* @function
|
||||
* @param {Object|XMLDocument} configuration - the raw configuration
|
||||
* @param {String} dataUrl - the url the data was retreived from if any.
|
||||
* @param {String} dataUrl - the url the data was retrieved from if any.
|
||||
* @return {Object} options - A dictionary of keyword arguments sufficient
|
||||
* to configure this tile sources constructor.
|
||||
*/
|
||||
@ -190,7 +190,7 @@ $.extend( $.LegacyTileSource.prototype, $.TileSource.prototype, /** @lends OpenS
|
||||
} );
|
||||
|
||||
/**
|
||||
* This method removes any files from the Array which dont conform to our
|
||||
* This method removes any files from the Array which don't conform to our
|
||||
* basic requirements for a 'level' in the LegacyTileSource.
|
||||
* @private
|
||||
* @inner
|
||||
|
||||
129
src/navigator.js
129
src/navigator.js
@ -110,7 +110,11 @@ $.Navigator = function( options ){
|
||||
animationTime: 0,
|
||||
autoResize: options.autoResize,
|
||||
// prevent resizing the navigator from adding unwanted space around the image
|
||||
minZoomImageRatio: 1.0
|
||||
minZoomImageRatio: 1.0,
|
||||
background: options.background,
|
||||
opacity: options.opacity,
|
||||
borderColor: options.borderColor,
|
||||
displayRegionColor: options.displayRegionColor
|
||||
});
|
||||
|
||||
options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio;
|
||||
@ -127,10 +131,10 @@ $.Navigator = function( options ){
|
||||
if ( options.controlOptions.anchor != $.ControlAnchor.NONE ) {
|
||||
(function( style, borderWidth ){
|
||||
style.margin = '0px';
|
||||
style.border = borderWidth + 'px solid #555';
|
||||
style.border = borderWidth + 'px solid ' + options.borderColor;
|
||||
style.padding = '0px';
|
||||
style.background = '#000';
|
||||
style.opacity = 0.8;
|
||||
style.background = options.background;
|
||||
style.opacity = options.opacity;
|
||||
style.overflow = 'hidden';
|
||||
}( this.element.style, this.borderWidth));
|
||||
}
|
||||
@ -145,10 +149,10 @@ $.Navigator = function( options ){
|
||||
style.left = '0px';
|
||||
style.fontSize = '0px';
|
||||
style.overflow = 'hidden';
|
||||
style.border = borderWidth + 'px solid #900';
|
||||
style.border = borderWidth + 'px solid ' + options.displayRegionColor;
|
||||
style.margin = '0px';
|
||||
style.padding = '0px';
|
||||
//TODO: IE doesnt like this property being set
|
||||
//TODO: IE doesn't like this property being set
|
||||
//try{ style.outline = '2px auto #909'; }catch(e){/*ignore*/}
|
||||
|
||||
style.background = 'transparent';
|
||||
@ -208,12 +212,14 @@ $.Navigator = function( options ){
|
||||
var degrees = options.viewer.viewport ?
|
||||
options.viewer.viewport.getRotation() :
|
||||
options.viewer.degrees || 0;
|
||||
|
||||
rotate(degrees);
|
||||
options.viewer.addHandler("rotate", function (args) {
|
||||
rotate(args.degrees);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Remove the base class' (Viewer's) innerTracker and replace it with our own
|
||||
this.innerTracker.destroy();
|
||||
this.innerTracker = new $.MouseTracker({
|
||||
@ -271,6 +277,22 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
/* Flip navigator element
|
||||
* @param {Boolean} state - Flip state to set.
|
||||
*/
|
||||
setFlip: function(state) {
|
||||
this.viewport.setFlip(state);
|
||||
|
||||
this.setDisplayTransform(this.viewer.viewport.getFlip() ? "scale(-1,1)" : "scale(1,1)");
|
||||
return this;
|
||||
},
|
||||
|
||||
setDisplayTransform: function(rule) {
|
||||
setElementTransform(this.displayRegion, rule);
|
||||
setElementTransform(this.canvas, rule);
|
||||
setElementTransform(this.element, rule);
|
||||
},
|
||||
|
||||
/**
|
||||
* Used to update the navigator minimap's viewport rectangle when a change in the viewer's viewport occurs.
|
||||
@ -399,16 +421,55 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onCanvasClick( event ) {
|
||||
if ( event.quick && this.viewer.viewport ) {
|
||||
this.viewer.viewport.panTo(this.viewport.pointFromPixel(event.position));
|
||||
var canvasClickEventArgs = {
|
||||
tracker: event.eventSource,
|
||||
position: event.position,
|
||||
quick: event.quick,
|
||||
shift: event.shift,
|
||||
originalEvent: event.originalEvent,
|
||||
preventDefaultAction: event.preventDefaultAction
|
||||
};
|
||||
/**
|
||||
* Raised when a click event occurs on the {@link OpenSeadragon.Viewer#navigator} element.
|
||||
*
|
||||
* @event navigator-click
|
||||
* @memberof OpenSeadragon.Viewer
|
||||
* @type {object}
|
||||
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
|
||||
* @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
|
||||
* @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
|
||||
* @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 {Object} originalEvent - The original DOM event.
|
||||
* @property {?Object} userData - Arbitrary subscriber-defined object.
|
||||
* @property {Boolean} preventDefaultAction - Set to true to prevent default click to zoom behaviour. Default: false.
|
||||
*/
|
||||
|
||||
this.viewer.raiseEvent('navigator-click', canvasClickEventArgs);
|
||||
|
||||
if ( !canvasClickEventArgs.preventDefaultAction && event.quick && this.viewer.viewport && (this.panVertical || this.panHorizontal)) {
|
||||
if(this.viewer.viewport.flipped) {
|
||||
event.position.x = this.viewport.getContainerSize().x - event.position.x;
|
||||
}
|
||||
var target = this.viewport.pointFromPixel(event.position);
|
||||
if (!this.panVertical) {
|
||||
// perform only horizonal pan
|
||||
target.y = this.viewer.viewport.getCenter(true).y;
|
||||
} else if (!this.panHorizontal) {
|
||||
// perform only vertical pan
|
||||
target.x = this.viewer.viewport.getCenter(true).x;
|
||||
}
|
||||
this.viewer.viewport.panTo(target);
|
||||
this.viewer.viewport.applyConstraints();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@ -417,13 +478,47 @@ function onCanvasClick( event ) {
|
||||
* @function
|
||||
*/
|
||||
function onCanvasDrag( event ) {
|
||||
if ( this.viewer.viewport ) {
|
||||
var canvasDragEventArgs = {
|
||||
tracker: event.eventSource,
|
||||
position: event.position,
|
||||
delta: event.delta,
|
||||
speed: event.speed,
|
||||
direction: event.direction,
|
||||
shift: event.shift,
|
||||
originalEvent: event.originalEvent,
|
||||
preventDefaultAction: event.preventDefaultAction
|
||||
};
|
||||
/**
|
||||
* Raised when a drag event occurs on the {@link OpenSeadragon.Viewer#navigator} element.
|
||||
*
|
||||
* @event navigator-drag
|
||||
* @memberof OpenSeadragon.Viewer
|
||||
* @type {object}
|
||||
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
|
||||
* @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
|
||||
* @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
|
||||
* @property {OpenSeadragon.Point} delta - The x,y components of the difference between start drag and end drag.
|
||||
* @property {Number} speed - Current computed speed, in pixels per second.
|
||||
* @property {Number} direction - Current computed direction, expressed as an angle counterclockwise relative to the positive X axis (-pi to pi, in radians). Only valid if speed > 0.
|
||||
* @property {Boolean} shift - True if the shift key was pressed during this event.
|
||||
* @property {Object} originalEvent - The original DOM event.
|
||||
* @property {?Object} userData - Arbitrary subscriber-defined object.
|
||||
* @property {Boolean} preventDefaultAction - Set to true to prevent default click to zoom behaviour. Default: false.
|
||||
*/
|
||||
this.viewer.raiseEvent('navigator-drag', canvasDragEventArgs);
|
||||
|
||||
if ( !canvasDragEventArgs.preventDefaultAction && this.viewer.viewport ) {
|
||||
if( !this.panHorizontal ){
|
||||
event.delta.x = 0;
|
||||
}
|
||||
if( !this.panVertical ){
|
||||
event.delta.y = 0;
|
||||
}
|
||||
|
||||
if(this.viewer.viewport.flipped){
|
||||
event.delta.x = -event.delta.x;
|
||||
}
|
||||
|
||||
this.viewer.viewport.panBy(
|
||||
this.viewport.deltaPointsFromPixels(
|
||||
event.delta
|
||||
@ -476,7 +571,7 @@ function onCanvasScroll( event ) {
|
||||
originalEvent: event.originalEvent
|
||||
});
|
||||
|
||||
//dont scroll the page up and down if the user is scrolling
|
||||
//don't scroll the page up and down if the user is scrolling
|
||||
//in the navigator
|
||||
return false;
|
||||
}
|
||||
@ -488,11 +583,15 @@ function onCanvasScroll( event ) {
|
||||
* @param {Number} degrees
|
||||
*/
|
||||
function _setTransformRotate( element, degrees ) {
|
||||
element.style.webkitTransform = "rotate(" + degrees + "deg)";
|
||||
element.style.mozTransform = "rotate(" + degrees + "deg)";
|
||||
element.style.msTransform = "rotate(" + degrees + "deg)";
|
||||
element.style.oTransform = "rotate(" + degrees + "deg)";
|
||||
element.style.transform = "rotate(" + degrees + "deg)";
|
||||
setElementTransform(element, "rotate(" + degrees + "deg)");
|
||||
}
|
||||
|
||||
function setElementTransform( element, rule ) {
|
||||
element.style.webkitTransform = rule;
|
||||
element.style.mozTransform = rule;
|
||||
element.style.msTransform = rule;
|
||||
element.style.oTransform = rule;
|
||||
element.style.transform = rule;
|
||||
}
|
||||
|
||||
}( OpenSeadragon ));
|
||||
|
||||
@ -198,6 +198,11 @@
|
||||
* 'destination-over', 'destination-atop', 'destination-in',
|
||||
* 'destination-out', 'lighter', 'copy' or 'xor'
|
||||
*
|
||||
* @property {Boolean} [imageSmoothingEnabled=true]
|
||||
* Image smoothing for canvas rendering (only if canvas is used). Note: Ignored
|
||||
* by some (especially older) browsers which do not support this canvas property.
|
||||
* This property can be changed in {@link Viewer.Drawer.setImageSmoothingEnabled}.
|
||||
*
|
||||
* @property {String|CanvasGradient|CanvasPattern|Function} [placeholderFillStyle=null]
|
||||
* Draws a colored rectangle behind the tile if it is not loaded yet.
|
||||
* You can pass a CSS color value like "#FF8800".
|
||||
@ -206,6 +211,9 @@
|
||||
* @property {Number} [degrees=0]
|
||||
* Initial rotation.
|
||||
*
|
||||
* @property {Boolean} [flipped=false]
|
||||
* Initial flip state.
|
||||
*
|
||||
* @property {Number} [minZoomLevel=null]
|
||||
*
|
||||
* @property {Number} [maxZoomLevel=null]
|
||||
@ -239,7 +247,7 @@
|
||||
* The maximum ratio to allow a zoom-in to affect the highest level pixel
|
||||
* ratio. This can be set to Infinity to allow 'infinite' zooming into the
|
||||
* image though it is less effective visually if the HTML5 Canvas is not
|
||||
* availble on the viewing device.
|
||||
* available on the viewing device.
|
||||
*
|
||||
* @property {Number} [smoothTileEdgesMinZoom=1.1]
|
||||
* A zoom percentage ( where 1 is 100% ) of the highest resolution level.
|
||||
@ -263,6 +271,9 @@
|
||||
* events between different devices, causing the faster devices to slow down enough to make the zoom control
|
||||
* more manageable.
|
||||
*
|
||||
* @property {Number} [rotationIncrement=90]
|
||||
* The number of degrees to rotate right or left when the rotate buttons or keyboard shortcuts are activated.
|
||||
*
|
||||
* @property {Number} [pixelsPerWheelLine=40]
|
||||
* For pixel-resolution scrolling devices, the number of pixels equal to one scroll line.
|
||||
*
|
||||
@ -314,6 +325,8 @@
|
||||
* @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.
|
||||
* @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,
|
||||
* the zoom is centered at the canvas center.
|
||||
* @property {Boolean} [gestureSettingsMouse.flickEnabled=false] - Enable flick gesture
|
||||
* @property {Number} [gestureSettingsMouse.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second)
|
||||
* @property {Number} [gestureSettingsMouse.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture
|
||||
@ -326,6 +339,8 @@
|
||||
* @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.
|
||||
* @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,
|
||||
* the zoom is centered at the canvas center.
|
||||
* @property {Boolean} [gestureSettingsTouch.flickEnabled=true] - Enable flick gesture
|
||||
* @property {Number} [gestureSettingsTouch.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second)
|
||||
* @property {Number} [gestureSettingsTouch.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture
|
||||
@ -338,6 +353,8 @@
|
||||
* @property {Boolean} [gestureSettingsPen.dblClickToZoom=false] - Zoom on double-click gesture. Note: If set to true
|
||||
* then clickToZoom should be set to false to prevent multiple zooms.
|
||||
* @property {Boolean} [gestureSettingsPen.pinchToZoom=false] - Zoom on pinch gesture
|
||||
* @property {Boolean} [gestureSettingsPan.zoomToRefPoint=true] - If zoomToRefPoint is true, the zoom is centered at the pointer position. Otherwise,
|
||||
* the zoom is centered at the canvas center.
|
||||
* @property {Boolean} [gestureSettingsPen.flickEnabled=false] - Enable flick gesture
|
||||
* @property {Number} [gestureSettingsPen.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second)
|
||||
* @property {Number} [gestureSettingsPen.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture
|
||||
@ -350,6 +367,8 @@
|
||||
* @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.
|
||||
* @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,
|
||||
* the zoom is centered at the canvas center.
|
||||
* @property {Boolean} [gestureSettingsUnknown.flickEnabled=true] - Enable flick gesture
|
||||
* @property {Number} [gestureSettingsUnknown.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second)
|
||||
* @property {Number} [gestureSettingsUnknown.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture
|
||||
@ -408,9 +427,21 @@
|
||||
* @property {Boolean} [navigatorRotate=true]
|
||||
* If true, the navigator will be rotated together with the viewer.
|
||||
*
|
||||
* @property {String} [navigatorBackground='#000']
|
||||
* Specifies the background color of the navigator minimap
|
||||
*
|
||||
* @property {Number} [navigatorOpacity=0.8]
|
||||
* Specifies the opacity of the navigator minimap.
|
||||
*
|
||||
* @property {String} [navigatorBorderColor='#555']
|
||||
* Specifies the border color of the navigator minimap
|
||||
*
|
||||
* @property {String} [navigatorDisplayRegionColor='#900']
|
||||
* Specifies the border color of the display region rectangle of the navigator minimap
|
||||
*
|
||||
* @property {Number} [controlsFadeDelay=2000]
|
||||
* The number of milliseconds to wait once the user has stopped interacting
|
||||
* with the interface before begining to fade the controls. Assumes
|
||||
* with the interface before beginning to fade the controls. Assumes
|
||||
* showNavigationControl and autoHideControls are both true.
|
||||
*
|
||||
* @property {Number} [controlsFadeLength=1500]
|
||||
@ -428,7 +459,7 @@
|
||||
* @property {Number} [minPixelRatio=0.5]
|
||||
* The higher the minPixelRatio, the lower the quality of the image that
|
||||
* is considered sufficient to stop rendering a given zoom level. For
|
||||
* example, if you are targeting mobile devices with less bandwith you may
|
||||
* example, if you are targeting mobile devices with less bandwidth you may
|
||||
* try setting this to 1.5 or higher.
|
||||
*
|
||||
* @property {Boolean} [mouseNavEnabled=true]
|
||||
@ -470,6 +501,10 @@
|
||||
* Note: {@link OpenSeadragon.Options.showNavigationControl} is overriding
|
||||
* this setting when set to false.
|
||||
*
|
||||
* @property {Boolean} [showFlipControl=false]
|
||||
* If true then the flip controls will be displayed as part of the
|
||||
* standard controls.
|
||||
*
|
||||
* @property {Boolean} [showSequenceControl=true]
|
||||
* If sequenceMode is true, then provide buttons for navigating forward and
|
||||
* backward through the images.
|
||||
@ -680,6 +715,12 @@
|
||||
* @property {String} rotateright.HOVER
|
||||
* @property {String} rotateright.DOWN
|
||||
*
|
||||
* @property {Object} flip - Images for the flip button.
|
||||
* @property {String} flip.REST
|
||||
* @property {String} flip.GROUP
|
||||
* @property {String} flip.HOVER
|
||||
* @property {String} flip.DOWN
|
||||
*
|
||||
* @property {Object} previous - Images for the previous button.
|
||||
* @property {String} previous.REST
|
||||
* @property {String} previous.GROUP
|
||||
@ -1044,6 +1085,7 @@ function OpenSeadragon( options ){
|
||||
clickToZoom: true,
|
||||
dblClickToZoom: false,
|
||||
pinchToZoom: false,
|
||||
zoomToRefPoint: true,
|
||||
flickEnabled: false,
|
||||
flickMinSpeed: 120,
|
||||
flickMomentum: 0.25,
|
||||
@ -1054,6 +1096,7 @@ function OpenSeadragon( options ){
|
||||
clickToZoom: false,
|
||||
dblClickToZoom: true,
|
||||
pinchToZoom: true,
|
||||
zoomToRefPoint: true,
|
||||
flickEnabled: true,
|
||||
flickMinSpeed: 120,
|
||||
flickMomentum: 0.25,
|
||||
@ -1064,6 +1107,7 @@ function OpenSeadragon( options ){
|
||||
clickToZoom: true,
|
||||
dblClickToZoom: false,
|
||||
pinchToZoom: false,
|
||||
zoomToRefPoint: true,
|
||||
flickEnabled: false,
|
||||
flickMinSpeed: 120,
|
||||
flickMomentum: 0.25,
|
||||
@ -1074,6 +1118,7 @@ function OpenSeadragon( options ){
|
||||
clickToZoom: false,
|
||||
dblClickToZoom: true,
|
||||
pinchToZoom: true,
|
||||
zoomToRefPoint: true,
|
||||
flickEnabled: true,
|
||||
flickMinSpeed: 120,
|
||||
flickMomentum: 0.25,
|
||||
@ -1095,6 +1140,7 @@ function OpenSeadragon( options ){
|
||||
autoResize: true,
|
||||
preserveImageSizeOnResize: false, // requires autoResize=true
|
||||
minScrollDeltaTime: 50,
|
||||
rotationIncrement: 90,
|
||||
|
||||
//DEFAULT CONTROL SETTINGS
|
||||
showSequenceControl: true, //SEQUENCE
|
||||
@ -1108,6 +1154,7 @@ function OpenSeadragon( options ){
|
||||
showHomeControl: true, //HOME
|
||||
showFullPageControl: true, //FULL
|
||||
showRotationControl: false, //ROTATION
|
||||
showFlipControl: false, //FLIP
|
||||
controlsFadeDelay: 2000, //ZOOM/HOME/FULL/SEQUENCE
|
||||
controlsFadeLength: 1500, //ZOOM/HOME/FULL/SEQUENCE
|
||||
mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY
|
||||
@ -1125,14 +1172,22 @@ function OpenSeadragon( options ){
|
||||
navigatorAutoResize: true,
|
||||
navigatorAutoFade: true,
|
||||
navigatorRotate: true,
|
||||
navigatorBackground: '#000',
|
||||
navigatorOpacity: 0.8,
|
||||
navigatorBorderColor: '#555',
|
||||
navigatorDisplayRegionColor: '#900',
|
||||
|
||||
// INITIAL ROTATION
|
||||
degrees: 0,
|
||||
|
||||
// INITIAL FLIP STATE
|
||||
flipped: false,
|
||||
|
||||
// APPEARANCE
|
||||
opacity: 1,
|
||||
preload: false,
|
||||
compositeOperation: null,
|
||||
imageSmoothingEnabled: true,
|
||||
placeholderFillStyle: null,
|
||||
|
||||
//REFERENCE STRIP SETTINGS
|
||||
@ -1199,6 +1254,12 @@ function OpenSeadragon( options ){
|
||||
HOVER: 'rotateright_hover.png',
|
||||
DOWN: 'rotateright_pressed.png'
|
||||
},
|
||||
flip: { // Flip icon designed by Yaroslav Samoylov from the Noun Project and modified by Nelson Campos ncampos@criteriamarathon.com, https://thenounproject.com/term/flip/136289/
|
||||
REST: 'flip_rest.png',
|
||||
GROUP: 'flip_grouphover.png',
|
||||
HOVER: 'flip_hover.png',
|
||||
DOWN: 'flip_pressed.png'
|
||||
},
|
||||
previous: {
|
||||
REST: 'previous_rest.png',
|
||||
GROUP: 'previous_grouphover.png',
|
||||
@ -1284,7 +1345,7 @@ function OpenSeadragon( options ){
|
||||
/**
|
||||
* Determines the position of the upper-left corner of the element.
|
||||
* @function
|
||||
* @param {Element|String} element - the elemenet we want the position for.
|
||||
* @param {Element|String} element - the element we want the position for.
|
||||
* @returns {OpenSeadragon.Point} - the position of the upper left corner of the element.
|
||||
*/
|
||||
getElementPosition: function( element ) {
|
||||
@ -2027,7 +2088,7 @@ function OpenSeadragon( options ){
|
||||
/**
|
||||
* Similar to OpenSeadragon.delegate, but it does not immediately call
|
||||
* the method on the object, returning a function which can be called
|
||||
* repeatedly to delegate the method. It also allows additonal arguments
|
||||
* repeatedly to delegate the method. It also allows additional arguments
|
||||
* to be passed during construction which will be added during each
|
||||
* invocation, and each invocation can add additional arguments as well.
|
||||
*
|
||||
@ -2061,7 +2122,7 @@ function OpenSeadragon( options ){
|
||||
|
||||
|
||||
/**
|
||||
* Retreives the value of a url parameter from the window.location string.
|
||||
* Retrieves the value of a url parameter from the window.location string.
|
||||
* @function
|
||||
* @param {String} key
|
||||
* @returns {String} The value of the url parameter or null if no param matches.
|
||||
@ -2555,7 +2616,7 @@ function OpenSeadragon( options ){
|
||||
//TODO: $.console is often used inside a try/catch block which generally
|
||||
// prevents allowings errors to occur with detection until a debugger
|
||||
// is attached. Although I've been guilty of the same anti-pattern
|
||||
// I eventually was convinced that errors should naturally propogate in
|
||||
// I eventually was convinced that errors should naturally propagate in
|
||||
// all but the most special cases.
|
||||
/**
|
||||
* A convenient alias for console when available, and a simple null
|
||||
|
||||
@ -121,7 +121,7 @@ $.extend( $.OsmTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
|
||||
*
|
||||
* @function
|
||||
* @param {Object} data - the raw configuration
|
||||
* @param {String} url - the url the data was retreived from if any.
|
||||
* @param {String} url - the url the data was retrieved from if any.
|
||||
* @return {Object} options - A dictionary of keyword arguments sufficient
|
||||
* to configure this tile sources constructor.
|
||||
*/
|
||||
|
||||
@ -84,10 +84,10 @@ $.Point.prototype = {
|
||||
},
|
||||
|
||||
/**
|
||||
* Substract another Point to this point and return a new Point.
|
||||
* Subtract another Point to this point and return a new Point.
|
||||
* @function
|
||||
* @param {OpenSeadragon.Point} point The point to substract vector components.
|
||||
* @returns {OpenSeadragon.Point} A new point representing the substraction of the
|
||||
* @param {OpenSeadragon.Point} point The point to subtract vector components.
|
||||
* @returns {OpenSeadragon.Point} A new point representing the subtraction of the
|
||||
* vector components
|
||||
*/
|
||||
minus: function( point ) {
|
||||
|
||||
@ -53,7 +53,7 @@ var THIS = {};
|
||||
* TODO: The difficult part of this feature is figuring out how to express
|
||||
* this functionality as a combination of the functionality already
|
||||
* provided by Drawer, Viewport, TileSource, and Navigator. It may
|
||||
* require better abstraction at those points in order to effeciently
|
||||
* require better abstraction at those points in order to efficiently
|
||||
* reuse those paradigms.
|
||||
*/
|
||||
/**
|
||||
|
||||
@ -57,7 +57,8 @@ var I18N = {
|
||||
NextPage: "Next page",
|
||||
PreviousPage: "Previous page",
|
||||
RotateLeft: "Rotate left",
|
||||
RotateRight: "Rotate right"
|
||||
RotateRight: "Rotate right",
|
||||
Flip: "Flip Horizontally"
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
35
src/tile.js
35
src/tile.js
@ -40,7 +40,7 @@
|
||||
* @param {Number} level The zoom level this tile belongs to.
|
||||
* @param {Number} x The vector component 'x'.
|
||||
* @param {Number} y The vector component 'y'.
|
||||
* @param {OpenSeadragon.Point} bounds Where this tile fits, in normalized
|
||||
* @param {OpenSeadragon.Rect} bounds Where this tile fits, in normalized
|
||||
* coordinates.
|
||||
* @param {Boolean} exists Is this tile a part of a sparse image? ( Also has
|
||||
* this tile failed to load? )
|
||||
@ -49,8 +49,11 @@
|
||||
* is provided directly by the tile source.
|
||||
* @param {Boolean} loadWithAjax Whether this tile image should be loaded with an AJAX request .
|
||||
* @param {Object} ajaxHeaders The headers to send with this tile's AJAX request (if applicable).
|
||||
* @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
|
||||
* with HTML the entire tile is always used.
|
||||
*/
|
||||
$.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, ajaxHeaders) {
|
||||
$.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, ajaxHeaders, sourceBounds) {
|
||||
/**
|
||||
* The zoom level this tile belongs to.
|
||||
* @member {Number} level
|
||||
@ -75,6 +78,13 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja
|
||||
* @memberof OpenSeadragon.Tile#
|
||||
*/
|
||||
this.bounds = bounds;
|
||||
/**
|
||||
* 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 with HTML the entire tile is always used.
|
||||
* @member {OpenSeadragon.Rect} sourceBounds
|
||||
* @memberof OpenSeadragon.Tile#
|
||||
*/
|
||||
this.sourceBounds = sourceBounds;
|
||||
/**
|
||||
* Is this tile a part of a sparse image? Also has this tile failed to load?
|
||||
* @member {Boolean} exists
|
||||
@ -346,10 +356,10 @@ $.Tile.prototype = {
|
||||
//clearing only the inside of the rectangle occupied
|
||||
//by the png prevents edge flikering
|
||||
context.clearRect(
|
||||
position.x + 1,
|
||||
position.y + 1,
|
||||
size.x - 2,
|
||||
size.y - 2
|
||||
position.x,
|
||||
position.y,
|
||||
size.x,
|
||||
size.y
|
||||
);
|
||||
}
|
||||
|
||||
@ -357,12 +367,21 @@ $.Tile.prototype = {
|
||||
// changes as we are rendering the image
|
||||
drawingHandler({context: context, tile: this, rendered: rendered});
|
||||
|
||||
var sourceWidth, sourceHeight;
|
||||
if (this.sourceBounds) {
|
||||
sourceWidth = Math.min(this.sourceBounds.width, rendered.canvas.width);
|
||||
sourceHeight = Math.min(this.sourceBounds.height, rendered.canvas.height);
|
||||
} else {
|
||||
sourceWidth = rendered.canvas.width;
|
||||
sourceHeight = rendered.canvas.height;
|
||||
}
|
||||
|
||||
context.drawImage(
|
||||
rendered.canvas,
|
||||
0,
|
||||
0,
|
||||
rendered.canvas.width,
|
||||
rendered.canvas.height,
|
||||
sourceWidth,
|
||||
sourceHeight,
|
||||
position.x,
|
||||
position.y,
|
||||
size.x,
|
||||
|
||||
@ -85,7 +85,11 @@
|
||||
*/
|
||||
$.TiledImage = function( options ) {
|
||||
var _this = this;
|
||||
|
||||
/**
|
||||
* The {@link OpenSeadragon.TileSource} that defines this TiledImage.
|
||||
* @member {OpenSeadragon.TileSource} source
|
||||
* @memberof OpenSeadragon.TiledImage#
|
||||
*/
|
||||
$.console.assert( options.tileCache, "[TiledImage] options.tileCache is required" );
|
||||
$.console.assert( options.drawer, "[TiledImage] options.drawer is required" );
|
||||
$.console.assert( options.viewer, "[TiledImage] options.viewer is required" );
|
||||
@ -968,6 +972,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
|
||||
|
||||
// Calculations for the interval of levels to draw
|
||||
// can return invalid intervals; fix that here if necessary
|
||||
highestLevel = Math.max(highestLevel, this.source.minLevel || 0);
|
||||
lowestLevel = Math.min(lowestLevel, highestLevel);
|
||||
return {
|
||||
lowestLevel: lowestLevel,
|
||||
@ -1372,6 +1377,7 @@ function getTile(
|
||||
var xMod,
|
||||
yMod,
|
||||
bounds,
|
||||
sourceBounds,
|
||||
exists,
|
||||
url,
|
||||
ajaxHeaders,
|
||||
@ -1389,6 +1395,7 @@ function getTile(
|
||||
xMod = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x;
|
||||
yMod = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y;
|
||||
bounds = tileSource.getTileBounds( level, xMod, yMod );
|
||||
sourceBounds = tileSource.getTileBounds( level, xMod, yMod, true );
|
||||
exists = tileSource.tileExists( level, xMod, yMod );
|
||||
url = tileSource.getTileUrl( level, xMod, yMod );
|
||||
|
||||
@ -1418,7 +1425,8 @@ function getTile(
|
||||
url,
|
||||
context2D,
|
||||
tiledImage.loadTilesWithAjax,
|
||||
ajaxHeaders
|
||||
ajaxHeaders,
|
||||
sourceBounds
|
||||
);
|
||||
|
||||
if (xMod === numTiles.x - 1) {
|
||||
@ -1667,7 +1675,7 @@ function blendTile( tiledImage, tile, x, y, level, levelOpacity, currentTime ){
|
||||
|
||||
tiledImage.lastDrawn.push( tile );
|
||||
|
||||
if ( opacity == 1 ) {
|
||||
if ( opacity === 1 ) {
|
||||
setCoverage( tiledImage.coverage, level, x, y, true );
|
||||
tiledImage._hasOpaqueTile = true;
|
||||
} else if ( deltaTime < blendTimeMillis ) {
|
||||
@ -1871,6 +1879,12 @@ function drawTiles( tiledImage, lastDrawn ) {
|
||||
tiledImage.getClippedBounds(true))
|
||||
.getIntegerBoundingBox()
|
||||
.times($.pixelDensityRatio);
|
||||
|
||||
if(tiledImage._drawer.viewer.viewport.getFlip()) {
|
||||
if (tiledImage.viewport.degrees !== 0 || tiledImage.getRotation(true) % 360 !== 0){
|
||||
bounds.x = tiledImage._drawer.viewer.container.clientWidth - (bounds.x + bounds.width);
|
||||
}
|
||||
}
|
||||
}
|
||||
tiledImage._drawer._clear(true, bounds);
|
||||
}
|
||||
@ -1892,6 +1906,12 @@ function drawTiles( tiledImage, lastDrawn ) {
|
||||
useSketch: useSketch
|
||||
});
|
||||
}
|
||||
|
||||
if (tiledImage.viewport.degrees === 0 && tiledImage.getRotation(true) % 360 === 0){
|
||||
if(tiledImage._drawer.viewer.viewport.getFlip()) {
|
||||
tiledImage._drawer._flip();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var usedClip = false;
|
||||
@ -2002,6 +2022,15 @@ function drawTiles( tiledImage, lastDrawn ) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!sketchScale) {
|
||||
if (tiledImage.viewport.degrees === 0 && tiledImage.getRotation(true) % 360 === 0){
|
||||
if(tiledImage._drawer.viewer.viewport.getFlip()) {
|
||||
tiledImage._drawer._flip();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawDebugInfo( tiledImage, lastDrawn );
|
||||
}
|
||||
|
||||
|
||||
@ -113,7 +113,7 @@ $.TileSource = function( width, height, tileSize, tileOverlap, minLevel, maxLeve
|
||||
//by asynchronously fetching their configuration data.
|
||||
$.EventSource.call( this );
|
||||
|
||||
//we allow options to override anything we dont treat as
|
||||
//we allow options to override anything we don't treat as
|
||||
//required via idiomatic options or which is functionally
|
||||
//set depending on the state of the readiness of this tile
|
||||
//source
|
||||
@ -172,7 +172,7 @@ $.TileSource = function( width, height, tileSize, tileOverlap, minLevel, maxLeve
|
||||
}
|
||||
|
||||
if (this.url) {
|
||||
//in case the getImageInfo method is overriden and/or implies an
|
||||
//in case the getImageInfo method is overridden and/or implies an
|
||||
//async mechanism set some safe defaults first
|
||||
this.aspectRatio = 1;
|
||||
this.dimensions = new $.Point( 10, 10 );
|
||||
@ -360,7 +360,7 @@ $.TileSource.prototype = {
|
||||
if (point.x >= 1) {
|
||||
x = this.getNumTiles(level).x - 1;
|
||||
}
|
||||
var EPSILON = 1e-16;
|
||||
var EPSILON = 1e-15;
|
||||
if (point.y >= 1 / this.aspectRatio - EPSILON) {
|
||||
y = this.getNumTiles(level).y - 1;
|
||||
}
|
||||
@ -373,8 +373,12 @@ $.TileSource.prototype = {
|
||||
* @param {Number} level
|
||||
* @param {Number} x
|
||||
* @param {Number} y
|
||||
* @param {Boolean} [isSource=false] Whether to return the source bounds of the tile.
|
||||
* @returns {OpenSeadragon.Rect} Either where this tile fits (in normalized coordinates) or the
|
||||
* portion of the tile to use as the source of the drawing operation (in pixels), depending on
|
||||
* the isSource parameter.
|
||||
*/
|
||||
getTileBounds: function( level, x, y ) {
|
||||
getTileBounds: function( level, x, y, isSource ) {
|
||||
var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ),
|
||||
tileWidth = this.getTileWidth(level),
|
||||
tileHeight = this.getTileHeight(level),
|
||||
@ -387,6 +391,10 @@ $.TileSource.prototype = {
|
||||
sx = Math.min( sx, dimensionsScaled.x - px );
|
||||
sy = Math.min( sy, dimensionsScaled.y - py );
|
||||
|
||||
if (isSource) {
|
||||
return new $.Rect(0, 0, sx, sy);
|
||||
}
|
||||
|
||||
return new $.Rect( px * scale, py * scale, sx * scale, sy * scale );
|
||||
},
|
||||
|
||||
|
||||
@ -110,7 +110,7 @@ $.extend( $.TmsTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
|
||||
*
|
||||
* @function
|
||||
* @param {Object} data - the raw configuration
|
||||
* @param {String} url - the url the data was retreived from if any.
|
||||
* @param {String} url - the url the data was retrieved from if any.
|
||||
* @return {Object} options - A dictionary of keyword arguments sufficient
|
||||
* to configure this tile sources constructor.
|
||||
*/
|
||||
|
||||
180
src/viewer.js
180
src/viewer.js
@ -69,7 +69,7 @@ $.Viewer = function( options ) {
|
||||
i;
|
||||
|
||||
|
||||
//backward compatibility for positional args while prefering more
|
||||
//backward compatibility for positional args while preferring more
|
||||
//idiomatic javascript options object as the only argument
|
||||
if( !$.isPlainObject( options ) ){
|
||||
options = {
|
||||
@ -145,6 +145,8 @@ $.Viewer = function( options ) {
|
||||
|
||||
//These are originally not part options but declared as members
|
||||
//in initialize. It's still considered idiomatic to put them here
|
||||
//source is here for backwards compatibility. It is not an official
|
||||
//part of the API and should not be relied upon.
|
||||
source: null,
|
||||
/**
|
||||
* Handles rendering of tiles in the viewer. Created for each TileSource opened.
|
||||
@ -152,6 +154,11 @@ $.Viewer = function( options ) {
|
||||
* @memberof OpenSeadragon.Viewer#
|
||||
*/
|
||||
drawer: null,
|
||||
/**
|
||||
* Keeps track of all of the tiled images in the scene.
|
||||
* @member {OpenSeadragon.Drawer} world
|
||||
* @memberof OpenSeadragon.Viewer#
|
||||
*/
|
||||
world: null,
|
||||
/**
|
||||
* Handles coordinate-related functionality - zoom, pan, rotation, etc. Created for each TileSource opened.
|
||||
@ -367,6 +374,7 @@ $.Viewer = function( options ) {
|
||||
maxZoomLevel: this.maxZoomLevel,
|
||||
viewer: this,
|
||||
degrees: this.degrees,
|
||||
flipped: this.flipped,
|
||||
navigatorRotate: this.navigatorRotate,
|
||||
homeFillsViewer: this.homeFillsViewer,
|
||||
margins: this.viewportMargins
|
||||
@ -430,6 +438,10 @@ $.Viewer = function( options ) {
|
||||
prefixUrl: this.prefixUrl,
|
||||
viewer: this,
|
||||
navigatorRotate: this.navigatorRotate,
|
||||
background: this.navigatorBackground,
|
||||
opacity: this.navigatorOpacity,
|
||||
borderColor: this.navigatorBorderColor,
|
||||
displayRegionColor: this.navigatorDisplayRegionColor,
|
||||
crossOriginPolicy: this.crossOriginPolicy
|
||||
});
|
||||
}
|
||||
@ -456,6 +468,12 @@ $.Viewer = function( options ) {
|
||||
$.requestAnimationFrame( function(){
|
||||
beginControlsAutoHide( _this );
|
||||
} );
|
||||
|
||||
// Initial canvas options
|
||||
if ( this.imageSmoothingEnabled !== undefined && !this.imageSmoothingEnabled){
|
||||
this.drawer.setImageSmoothingEnabled(this.imageSmoothingEnabled);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, /** @lends OpenSeadragon.Viewer.prototype */{
|
||||
@ -819,7 +837,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
var enabled = this.controls.length,
|
||||
i;
|
||||
for( i = 0; i < this.controls.length; i++ ){
|
||||
enabled = enabled && this.controls[ i ].isVisibile();
|
||||
enabled = enabled && this.controls[ i ].isVisible();
|
||||
}
|
||||
return enabled;
|
||||
},
|
||||
@ -896,7 +914,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
nodes,
|
||||
i;
|
||||
|
||||
//dont bother modifying the DOM if we are already in full page mode.
|
||||
//don't bother modifying the DOM if we are already in full page mode.
|
||||
if ( fullPage == this.isFullPage() ) {
|
||||
return this;
|
||||
}
|
||||
@ -951,7 +969,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
bodyStyle.height = "100%";
|
||||
docStyle.height = "100%";
|
||||
|
||||
//when entering full screen on the ipad it wasnt sufficient to leave
|
||||
//when entering full screen on the ipad it wasn't sufficient to leave
|
||||
//the body intact as only only the top half of the screen would
|
||||
//respond to touch events on the canvas, while the bottom half treated
|
||||
//them as touch events on the document body. Thus we remove and store
|
||||
@ -1158,7 +1176,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
}
|
||||
}
|
||||
if ( _this.navigator && _this.viewport ) {
|
||||
//09/08/2018 - Fabroh : Fix issue #1504 : Ensure to get the navigator updated on fullscreen out with custom location with a timeout
|
||||
setTimeout(function(){
|
||||
_this.navigator.update( _this.viewport );
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Raised when the viewer has changed to/from full-screen mode (see {@link OpenSeadragon.Viewer#setFullScreen}).
|
||||
@ -1676,6 +1697,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
onFullScreenHandler = $.delegate( this, onFullScreen ),
|
||||
onRotateLeftHandler = $.delegate( this, onRotateLeft ),
|
||||
onRotateRightHandler = $.delegate( this, onRotateRight ),
|
||||
onFlipHandler = $.delegate( this, onFlip),
|
||||
onFocusHandler = $.delegate( this, onFocus ),
|
||||
onBlurHandler = $.delegate( this, onBlur ),
|
||||
navImages = this.navImages,
|
||||
@ -1687,7 +1709,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
|
||||
if( this.zoomInButton || this.zoomOutButton ||
|
||||
this.homeButton || this.fullPageButton ||
|
||||
this.rotateLeftButton || this.rotateRightButton ) {
|
||||
this.rotateLeftButton || this.rotateRightButton ||
|
||||
this.flipButton ) {
|
||||
//if we are binding to custom buttons then layout and
|
||||
//grouping is the responsibility of the page author
|
||||
useGroup = false;
|
||||
@ -1791,7 +1814,22 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
onFocus: onFocusHandler,
|
||||
onBlur: onBlurHandler
|
||||
}));
|
||||
}
|
||||
|
||||
if ( this.showFlipControl ) {
|
||||
buttons.push( this.flipButton = new $.Button({
|
||||
element: this.flipButton ? $.getElement( this.flipButton ) : null,
|
||||
clickTimeThreshold: this.clickTimeThreshold,
|
||||
clickDistThreshold: this.clickDistThreshold,
|
||||
tooltip: $.getString( "Tooltips.Flip" ),
|
||||
srcRest: resolveUrl( this.prefixUrl, navImages.flip.REST ),
|
||||
srcGroup: resolveUrl( this.prefixUrl, navImages.flip.GROUP ),
|
||||
srcHover: resolveUrl( this.prefixUrl, navImages.flip.HOVER ),
|
||||
srcDown: resolveUrl( this.prefixUrl, navImages.flip.DOWN ),
|
||||
onRelease: onFlipHandler,
|
||||
onFocus: onFocusHandler,
|
||||
onBlur: onBlurHandler
|
||||
}));
|
||||
}
|
||||
|
||||
if ( useGroup ) {
|
||||
@ -1870,11 +1908,11 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
* is closed which include when changing page.
|
||||
* @method
|
||||
* @param {Element|String|Object} element - A reference to an element or an id for
|
||||
* the element which will be overlayed. Or an Object specifying the configuration for the overlay.
|
||||
* the element which will be overlaid. Or an Object specifying the configuration for the overlay.
|
||||
* If using an object, see {@link OpenSeadragon.Overlay} for a list of
|
||||
* all available options.
|
||||
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
|
||||
* rectangle which will be overlayed. This is a viewport relative location.
|
||||
* rectangle which will be overlaid. This is a viewport relative location.
|
||||
* @param {OpenSeadragon.Placement} placement - The position of the
|
||||
* viewport which the location coordinates will be treated as relative
|
||||
* to.
|
||||
@ -1933,9 +1971,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
* element id moving it to the new location, relative to the new placement.
|
||||
* @method
|
||||
* @param {Element|String} element - A reference to an element or an id for
|
||||
* the element which is overlayed.
|
||||
* the element which is overlaid.
|
||||
* @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
|
||||
* rectangle which will be overlayed. This is a viewport relative location.
|
||||
* rectangle which will be overlaid. This is a viewport relative location.
|
||||
* @param {OpenSeadragon.Placement} placement - The position of the
|
||||
* viewport which the location coordinates will be treated as relative
|
||||
* to.
|
||||
@ -2479,31 +2517,62 @@ function onBlur(){
|
||||
}
|
||||
|
||||
function onCanvasKeyDown( event ) {
|
||||
if ( !event.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
|
||||
var canvasKeyDownEventArgs = {
|
||||
originalEvent: event.originalEvent,
|
||||
preventDefaultAction: event.preventDefaultAction,
|
||||
preventVerticalPan: event.preventVerticalPan,
|
||||
preventHorizontalPan: event.preventHorizontalPan
|
||||
};
|
||||
|
||||
/**
|
||||
* Raised when a keyboard key is pressed and the focus is on the {@link OpenSeadragon.Viewer#canvas} element.
|
||||
*
|
||||
* @event canvas-key
|
||||
* @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', canvasKeyDownEventArgs);
|
||||
|
||||
if ( !canvasKeyDownEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
|
||||
switch( event.keyCode ){
|
||||
case 38://up arrow
|
||||
if (!canvasKeyDownEventArgs.preventVerticalPan) {
|
||||
if ( event.shift ) {
|
||||
this.viewport.zoomBy(1.1);
|
||||
} else {
|
||||
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, -this.pixelsPerArrowPress)));
|
||||
}
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
return false;
|
||||
case 40://down arrow
|
||||
if (!canvasKeyDownEventArgs.preventVerticalPan) {
|
||||
if ( event.shift ) {
|
||||
this.viewport.zoomBy(0.9);
|
||||
} else {
|
||||
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, this.pixelsPerArrowPress)));
|
||||
}
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
return false;
|
||||
case 37://left arrow
|
||||
if (!canvasKeyDownEventArgs.preventHorizontalPan) {
|
||||
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-this.pixelsPerArrowPress, 0)));
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
return false;
|
||||
case 39://right arrow
|
||||
if (!canvasKeyDownEventArgs.preventHorizontalPan) {
|
||||
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(this.pixelsPerArrowPress, 0)));
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
return false;
|
||||
default:
|
||||
//console.log( 'navigator keycode %s', event.keyCode );
|
||||
@ -2513,9 +2582,18 @@ function onCanvasKeyDown( event ) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function onCanvasKeyPress( event ) {
|
||||
if ( !event.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
|
||||
var canvasKeyPressEventArgs = {
|
||||
originalEvent: event.originalEvent,
|
||||
preventDefaultAction: event.preventDefaultAction,
|
||||
preventVerticalPan: event.preventVerticalPan,
|
||||
preventHorizontalPan: event.preventHorizontalPan
|
||||
};
|
||||
|
||||
// This event is documented in onCanvasKeyDown
|
||||
this.raiseEvent('canvas-key', canvasKeyPressEventArgs);
|
||||
|
||||
if ( !canvasKeyPressEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
|
||||
switch( event.keyCode ){
|
||||
case 43://=|+
|
||||
case 61://=|+
|
||||
@ -2532,29 +2610,56 @@ function onCanvasKeyPress( event ) {
|
||||
return false;
|
||||
case 119://w
|
||||
case 87://W
|
||||
if (!canvasKeyPressEventArgs.preventVerticalPan) {
|
||||
if ( event.shift ) {
|
||||
this.viewport.zoomBy(1.1);
|
||||
} else {
|
||||
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, -40)));
|
||||
}
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
return false;
|
||||
case 115://s
|
||||
case 83://S
|
||||
if (!canvasKeyPressEventArgs.preventVerticalPan) {
|
||||
if ( event.shift ) {
|
||||
this.viewport.zoomBy(0.9);
|
||||
} else {
|
||||
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, 40)));
|
||||
}
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
return false;
|
||||
case 97://a
|
||||
if (!canvasKeyPressEventArgs.preventHorizontalPan) {
|
||||
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0)));
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
return false;
|
||||
case 100://d
|
||||
if (!canvasKeyPressEventArgs.preventHorizontalPan) {
|
||||
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0)));
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
return false;
|
||||
case 114: //r - clockwise rotation
|
||||
if(this.viewport.flipped){
|
||||
this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
|
||||
} else{
|
||||
this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
|
||||
}
|
||||
this.viewport.applyConstraints();
|
||||
return false;
|
||||
case 82: //R - counterclockwise rotation
|
||||
if(this.viewport.flipped){
|
||||
this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
|
||||
} else{
|
||||
this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
|
||||
}
|
||||
this.viewport.applyConstraints();
|
||||
return false;
|
||||
case 102: //f
|
||||
this.viewport.toggleFlip();
|
||||
return false;
|
||||
default:
|
||||
// console.log( 'navigator keycode %s', event.keyCode );
|
||||
@ -2574,6 +2679,9 @@ function onCanvasClick( event ) {
|
||||
if ( !haveKeyboardFocus ) {
|
||||
this.canvas.focus();
|
||||
}
|
||||
if(this.viewport.flipped){
|
||||
event.position.x = this.viewport.getContainerSize().x - event.position.x;
|
||||
}
|
||||
|
||||
var canvasClickEventArgs = {
|
||||
tracker: event.eventSource,
|
||||
@ -2606,7 +2714,7 @@ function onCanvasClick( event ) {
|
||||
if ( gestureSettings.clickToZoom ) {
|
||||
this.viewport.zoomBy(
|
||||
event.shift ? 1.0 / this.zoomPerClick : this.zoomPerClick,
|
||||
this.viewport.pointFromPixel( event.position, true )
|
||||
gestureSettings.zoomToRefPoint ? this.viewport.pointFromPixel( event.position, true ) : null
|
||||
);
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
@ -2645,7 +2753,7 @@ function onCanvasDblClick( event ) {
|
||||
if ( gestureSettings.dblClickToZoom ) {
|
||||
this.viewport.zoomBy(
|
||||
event.shift ? 1.0 / this.zoomPerClick : this.zoomPerClick,
|
||||
this.viewport.pointFromPixel( event.position, true )
|
||||
gestureSettings.zoomToRefPoint ? this.viewport.pointFromPixel( event.position, true ) : null
|
||||
);
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
@ -2693,6 +2801,9 @@ function onCanvasDrag( event ) {
|
||||
if( !this.panVertical ){
|
||||
event.delta.y = 0;
|
||||
}
|
||||
if(this.viewport.flipped){
|
||||
event.delta.x = -event.delta.x;
|
||||
}
|
||||
|
||||
if( this.constrainDuringPan ){
|
||||
var delta = this.viewport.deltaPointsFromPixels( event.delta.negate() );
|
||||
@ -2959,7 +3070,9 @@ function onCanvasPinch( event ) {
|
||||
panByPt.y = 0;
|
||||
}
|
||||
this.viewport.zoomBy( event.distance / event.lastDistance, centerPt, true );
|
||||
if ( gestureSettings.zoomToRefPoint ) {
|
||||
this.viewport.panBy(panByPt, true);
|
||||
}
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
if ( gestureSettings.pinchRotate ) {
|
||||
@ -3016,13 +3129,17 @@ function onCanvasScroll( event ) {
|
||||
if (deltaScrollTime > this.minScrollDeltaTime) {
|
||||
this._lastScrollTime = thisScrollTime;
|
||||
|
||||
if(this.viewport.flipped){
|
||||
event.position.x = this.viewport.getContainerSize().x - event.position.x;
|
||||
}
|
||||
|
||||
if ( !event.preventDefaultAction && this.viewport ) {
|
||||
gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
|
||||
if ( gestureSettings.scrollToZoom ) {
|
||||
factor = Math.pow( this.zoomPerScroll, event.scroll );
|
||||
this.viewport.zoomBy(
|
||||
factor,
|
||||
this.viewport.pointFromPixel( event.position, true )
|
||||
gestureSettings.zoomToRefPoint ? this.viewport.pointFromPixel( event.position, true ) : null
|
||||
);
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
@ -3375,38 +3492,37 @@ function onFullScreen() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Note: The current rotation feature is limited to 90 degree turns.
|
||||
*/
|
||||
function onRotateLeft() {
|
||||
if ( this.viewport ) {
|
||||
var currRotation = this.viewport.getRotation();
|
||||
if (currRotation === 0) {
|
||||
currRotation = 270;
|
||||
}
|
||||
else {
|
||||
currRotation -= 90;
|
||||
|
||||
if ( this.viewport.flipped ){
|
||||
currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360);
|
||||
} else {
|
||||
currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360);
|
||||
}
|
||||
this.viewport.setRotation(currRotation);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Note: The current rotation feature is limited to 90 degree turns.
|
||||
*/
|
||||
function onRotateRight() {
|
||||
if ( this.viewport ) {
|
||||
var currRotation = this.viewport.getRotation();
|
||||
if (currRotation === 270) {
|
||||
currRotation = 0;
|
||||
}
|
||||
else {
|
||||
currRotation += 90;
|
||||
|
||||
if ( this.viewport.flipped ){
|
||||
currRotation = $.positiveModulo(currRotation - this.rotationIncrement, 360);
|
||||
} else {
|
||||
currRotation = $.positiveModulo(currRotation + this.rotationIncrement, 360);
|
||||
}
|
||||
this.viewport.setRotation(currRotation);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Note: When pressed flip control button
|
||||
*/
|
||||
function onFlip() {
|
||||
this.viewport.toggleFlip();
|
||||
}
|
||||
|
||||
function onPrevious(){
|
||||
var previous = this._sequenceIndex - 1;
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
*/
|
||||
$.Viewport = function( options ) {
|
||||
|
||||
//backward compatibility for positional args while prefering more
|
||||
//backward compatibility for positional args while preferring more
|
||||
//idiomatic javascript options object as the only argument
|
||||
var args = arguments;
|
||||
if (args.length && args[0] instanceof $.Point) {
|
||||
@ -107,6 +107,7 @@ $.Viewport = function( options ) {
|
||||
minZoomLevel: $.DEFAULT_SETTINGS.minZoomLevel,
|
||||
maxZoomLevel: $.DEFAULT_SETTINGS.maxZoomLevel,
|
||||
degrees: $.DEFAULT_SETTINGS.degrees,
|
||||
flipped: $.DEFAULT_SETTINGS.flipped,
|
||||
homeFillsViewer: $.DEFAULT_SETTINGS.homeFillsViewer
|
||||
|
||||
}, options );
|
||||
@ -880,7 +881,6 @@ $.Viewport.prototype = {
|
||||
if (!this.viewer || !this.viewer.drawer.canRotate()) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.degrees = $.positiveModulo(degrees, 360);
|
||||
this._setContentBounds(
|
||||
this.viewer.world.getHomeBounds(),
|
||||
@ -1518,7 +1518,58 @@ $.Viewport.prototype = {
|
||||
var scale = this._contentBoundsNoRotate.width;
|
||||
var viewportToImageZoomRatio = (imageWidth / containerWidth) / scale;
|
||||
return imageZoom * viewportToImageZoomRatio;
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggles flip state and demands a new drawing on navigator and viewer objects.
|
||||
* @function
|
||||
* @return {OpenSeadragon.Viewport} Chainable.
|
||||
*/
|
||||
toggleFlip: function() {
|
||||
this.setFlip(!this.getFlip());
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get flip state stored on viewport.
|
||||
* @function
|
||||
* @return {Boolean} Flip state.
|
||||
*/
|
||||
getFlip: function() {
|
||||
return this.flipped;
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets flip state according to the state input argument.
|
||||
* @function
|
||||
* @param {Boolean} state - Flip state to set.
|
||||
* @return {OpenSeadragon.Viewport} Chainable.
|
||||
*/
|
||||
setFlip: function( state ) {
|
||||
if ( this.flipped === state ) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.flipped = state;
|
||||
if(this.viewer.navigator){
|
||||
this.viewer.navigator.setFlip(this.getFlip());
|
||||
}
|
||||
this.viewer.forceRedraw();
|
||||
|
||||
/**
|
||||
* Raised when flip state has been changed.
|
||||
*
|
||||
* @event flip
|
||||
* @memberof OpenSeadragon.Viewer
|
||||
* @type {object}
|
||||
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
|
||||
* @property {Number} flipped - The flip state after this change.
|
||||
* @property {?Object} userData - Arbitrary subscriber-defined object.
|
||||
*/
|
||||
this.viewer.raiseEvent('flip', {"flipped": state});
|
||||
return this;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
}( OpenSeadragon ));
|
||||
|
||||
@ -114,7 +114,7 @@
|
||||
*
|
||||
* @function
|
||||
* @param {Object} data - the raw configuration
|
||||
* @param {String} url - the url the data was retreived from if any.
|
||||
* @param {String} url - the url the data was retrieved from if any.
|
||||
* @return {Object} options - A dictionary of keyword arguments sufficient
|
||||
* to configure this tile sources constructor.
|
||||
*/
|
||||
|
||||
BIN
test/data/iiif_2_0_tiled_sf1/0,0,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/0,0,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/0,256,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/0,256,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/0,512,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/0,512,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/0,768,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/0,768,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/256,0,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/256,0,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/256,256,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/256,256,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/256,512,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/256,512,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/256,768,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/256,768,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/512,0,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/512,0,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/512,256,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/512,256,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/512,512,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/512,512,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/512,768,256,256/256,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/512,768,256,256/256,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
test/data/iiif_2_0_tiled_sf1/768,0,7,256/7,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/768,0,7,256/7,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 B |
BIN
test/data/iiif_2_0_tiled_sf1/768,256,7,256/7,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/768,256,7,256/7,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 716 B |
BIN
test/data/iiif_2_0_tiled_sf1/768,512,7,256/7,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/768,512,7,256/7,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 B |
BIN
test/data/iiif_2_0_tiled_sf1/768,768,7,256/7,/0/default.jpg
Normal file
BIN
test/data/iiif_2_0_tiled_sf1/768,768,7,256/7,/0/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 712 B |
31
test/data/iiif_2_0_tiled_sf1/info.json
Normal file
31
test/data/iiif_2_0_tiled_sf1/info.json
Normal file
@ -0,0 +1,31 @@
|
||||
{
|
||||
"@context": "http://iiif.io/api/image/2/context.json",
|
||||
"@id": "http://localhost:8000/test/data/iiif_2_0_tiled_sf1",
|
||||
"protocol": "http://iiif.io/api/image",
|
||||
"height": 1024,
|
||||
"width": 775,
|
||||
"tiles": [
|
||||
{
|
||||
"width": 256,
|
||||
"scaleFactors": [
|
||||
1
|
||||
]
|
||||
}
|
||||
],
|
||||
"profile": [
|
||||
"http://iiif.io/api/image/2/level1.json",
|
||||
{
|
||||
"qualities": [
|
||||
"native",
|
||||
"bitonal",
|
||||
"grey",
|
||||
"color"
|
||||
],
|
||||
"formats": [
|
||||
"jpg",
|
||||
"png",
|
||||
"gif"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
43
test/demo/customnavigatorlocation.html
Normal file
43
test/demo/customnavigatorlocation.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenSeadragon With Custom Navigator Location</title>
|
||||
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
||||
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
||||
<style type="text/css">
|
||||
|
||||
.openseadragon1 {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
.openseadragon-small
|
||||
{
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
border: 1px solid black;
|
||||
color: #333; /* text color for messages */
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
Simple demo page to show custom location for navigator.
|
||||
</div>
|
||||
<div id="navigatorDiv" class="openseadragon-small"></div>
|
||||
<div id="contentDiv" class="openseadragon1"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var viewer = OpenSeadragon({
|
||||
// debugMode: true,
|
||||
id: "contentDiv",
|
||||
prefixUrl: "../../build/openseadragon/images/",
|
||||
tileSources: "../data/testpattern.dzi",
|
||||
showNavigator:true,
|
||||
navigatorId: "navigatorDiv",
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
34
test/demo/iiif-tiled-sf1.html
Normal file
34
test/demo/iiif-tiled-sf1.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenSeadragon Demo - IIIF Tiled scaleFactors [1]</title>
|
||||
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
||||
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
||||
<style type="text/css">
|
||||
|
||||
.openseadragon1 {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Default OpenSeadragon viewer from IIIF Tile Source.</p>
|
||||
<p>This is for testing the support for scaleFactors [1]</p>
|
||||
</div>
|
||||
<div id="contentDiv" class="openseadragon1"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var viewer = OpenSeadragon({
|
||||
// debugMode: true,
|
||||
id: "contentDiv",
|
||||
prefixUrl: "../../build/openseadragon/images/",
|
||||
tileSources: "../data/iiif_2_0_tiled_sf1/info.json",
|
||||
showNavigator: true
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
35
test/demo/timeout-certain.html
Normal file
35
test/demo/timeout-certain.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenSeadragon Demo - Timeout Certain</title>
|
||||
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
||||
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
||||
<style type="text/css">
|
||||
|
||||
.openseadragon1 {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>The ImageLoader timeout is set to 0 ms, and the tile source is remote.</p>
|
||||
<p>In any web browser on any network connection, OpenSeadragon should not load properly, and the browser console log should show tile loading errors.</p>
|
||||
</div>
|
||||
<div id="contentDiv" class="openseadragon1"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var viewer = OpenSeadragon({
|
||||
// debugMode: true,
|
||||
id: "contentDiv",
|
||||
prefixUrl: "../../build/openseadragon/images/",
|
||||
tileSources: "http://wellcomelibrary.org/iiif-img/b11768265-0/a6801943-b8b4-4674-908c-7d5b27e70569/info.json",
|
||||
showNavigator:true,
|
||||
timeout: 0
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
35
test/demo/timeout-unlikely.html
Normal file
35
test/demo/timeout-unlikely.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenSeadragon Demo - Timeout Unlikely</title>
|
||||
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
||||
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
||||
<style type="text/css">
|
||||
|
||||
.openseadragon1 {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>The ImageLoader timeout is set to 24 hours, and the tile source is remote.</p>
|
||||
<p>In any web browser on nearly any network connection, OpenSeadragon should load properly, and the browser console log should not show any tile loading errors.</p>
|
||||
</div>
|
||||
<div id="contentDiv" class="openseadragon1"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
var viewer = OpenSeadragon({
|
||||
// debugMode: true,
|
||||
id: "contentDiv",
|
||||
prefixUrl: "../../build/openseadragon/images/",
|
||||
tileSources: "http://wellcomelibrary.org/iiif-img/b11768265-0/a6801943-b8b4-4674-908c-7d5b27e70569/info.json",
|
||||
showNavigator:true,
|
||||
timeout: 1000 * 60 * 60 * 24
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -113,6 +113,11 @@
|
||||
testOpenUrl('iiif_2_0_tiled/info.json', assert);
|
||||
});
|
||||
|
||||
// ----------
|
||||
QUnit.test('IIIF 2.0 JSON scaleFactors [1]', function(assert) {
|
||||
testOpenUrl('iiif_2_0_tiled_sf1/info.json', assert);
|
||||
});
|
||||
|
||||
// ----------
|
||||
QUnit.test('IIIF 2.0 JSON, sizes array only', function(assert) {
|
||||
testOpenUrl('iiif_2_0_sizes/info.json', assert);
|
||||
|
||||
@ -107,6 +107,17 @@
|
||||
maxLevel: 0,
|
||||
});
|
||||
assertTileAtPoint(0, new OpenSeadragon.Point(1, 1239 / 4036), new OpenSeadragon.Point(0, 0));
|
||||
|
||||
// Test for issue #1362
|
||||
tileSource = new OpenSeadragon.TileSource({
|
||||
width: 2000,
|
||||
height: 3033,
|
||||
tileWidth: 2000,
|
||||
tileHeight: 3033,
|
||||
tileOverlap: 0,
|
||||
maxLevel: 0,
|
||||
});
|
||||
assertTileAtPoint(0, new OpenSeadragon.Point(1, 3033 / 2000), new OpenSeadragon.Point(0, 0));
|
||||
});
|
||||
|
||||
}());
|
||||
|
||||
@ -118,6 +118,7 @@
|
||||
assert,
|
||||
actual,
|
||||
expected,
|
||||
1e-15,
|
||||
"Correctly converted coordinates " + orig
|
||||
);
|
||||
} else {
|
||||
@ -136,8 +137,8 @@
|
||||
viewer.open(DZI_PATH);
|
||||
};
|
||||
|
||||
function assertPointsEquals(assert, actual, expected, message) {
|
||||
Util.assertPointsEquals(assert, actual, expected, 1e-15, message);
|
||||
function assertPointsEquals(assert, actual, expected, variance, message) {
|
||||
Util.assertPointsEquals(assert, actual, expected, variance, message);
|
||||
}
|
||||
|
||||
// Tests start here.
|
||||
@ -470,6 +471,32 @@
|
||||
bounds,
|
||||
EPSILON,
|
||||
"Viewport.applyConstraints should move viewport.");
|
||||
|
||||
done();
|
||||
};
|
||||
viewer.addHandler('open', openHandler);
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('applyConstraints flipped', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function() {
|
||||
viewer.removeHandler('open', openHandler);
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
viewport.setFlip(true);
|
||||
|
||||
viewport.fitBounds(new OpenSeadragon.Rect(1, 1, 1, 1), true);
|
||||
viewport.visibilityRatio = 0.3;
|
||||
viewport.applyConstraints(true);
|
||||
var bounds = viewport.getBounds();
|
||||
Util.assertRectangleEquals(
|
||||
assert,
|
||||
new OpenSeadragon.Rect(0.7, 0.7, 1, 1),
|
||||
bounds,
|
||||
EPSILON,
|
||||
"Viewport.applyConstraints should move flipped viewport.");
|
||||
|
||||
done();
|
||||
};
|
||||
viewer.addHandler('open', openHandler);
|
||||
@ -514,6 +541,32 @@
|
||||
new OpenSeadragon.Rect(1, 0, Math.sqrt(2), Math.sqrt(2), 45),
|
||||
EPSILON,
|
||||
"Viewport.applyConstraints with rotation should move viewport.");
|
||||
|
||||
done();
|
||||
};
|
||||
viewer.addHandler('open', openHandler);
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('applyConstraints flipped with rotation', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function() {
|
||||
viewer.removeHandler('open', openHandler);
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
viewport.setFlip(true);
|
||||
viewport.setRotation(45);
|
||||
|
||||
viewport.fitBounds(new OpenSeadragon.Rect(1, 1, 1, 1), true);
|
||||
viewport.applyConstraints(true);
|
||||
var bounds = viewport.getBounds();
|
||||
Util.assertRectangleEquals(
|
||||
assert,
|
||||
bounds,
|
||||
new OpenSeadragon.Rect(1, 0, Math.sqrt(2), Math.sqrt(2), 45),
|
||||
EPSILON,
|
||||
"Viewport.applyConstraints flipped and with rotation should move viewport.");
|
||||
|
||||
done();
|
||||
};
|
||||
viewer.addHandler('open', openHandler);
|
||||
@ -742,6 +795,30 @@
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('panBy flipped', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
viewer.removeHandler('open', openHandler);
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
viewport.setFlip(true);
|
||||
|
||||
for (var i = 0; i < testPoints.length; i++){
|
||||
var expected = viewport.getCenter().plus(testPoints[i]);
|
||||
viewport.panBy(testPoints[i], true);
|
||||
assert.propEqual(
|
||||
viewport.getCenter(),
|
||||
expected,
|
||||
"Panned flipped by the correct amount."
|
||||
);
|
||||
}
|
||||
|
||||
done();
|
||||
};
|
||||
viewer.addHandler('open', openHandler);
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('panTo', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
@ -763,6 +840,29 @@
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('panTo flipped', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
viewer.removeHandler('open', openHandler);
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
viewport.setFlip(true);
|
||||
|
||||
for (var i = 0; i < testPoints.length; i++){
|
||||
viewport.panTo(testPoints[i], true);
|
||||
assert.propEqual(
|
||||
viewport.getCenter(),
|
||||
testPoints[i],
|
||||
"Panned flipped to the correct location."
|
||||
);
|
||||
}
|
||||
|
||||
done();
|
||||
};
|
||||
viewer.addHandler('open', openHandler);
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('zoomBy no ref point', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
@ -821,6 +921,45 @@
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('zoomBy flipped with ref point', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
viewer.removeHandler('open', openHandler);
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
viewport.setFlip(true);
|
||||
|
||||
var expectedFlippedCenters = [
|
||||
new OpenSeadragon.Point(5, 5),
|
||||
new OpenSeadragon.Point(6.996, 6.996),
|
||||
new OpenSeadragon.Point(7.246, 6.996),
|
||||
new OpenSeadragon.Point(7.246, 6.996),
|
||||
new OpenSeadragon.Point(7.621, 7.371),
|
||||
new OpenSeadragon.Point(7.621, 7.371),
|
||||
];
|
||||
|
||||
for (var i = 0; i < testZoomLevels.length; i++) {
|
||||
viewport.zoomBy(testZoomLevels[i], testPoints[i], true);
|
||||
assert.propEqual(
|
||||
testZoomLevels[i],
|
||||
viewport.getZoom(),
|
||||
"Zoomed flipped by the correct amount."
|
||||
);
|
||||
assertPointsEquals(
|
||||
assert,
|
||||
expectedFlippedCenters[i],
|
||||
viewport.getCenter(),
|
||||
1e-6,
|
||||
"Panned flipped to the correct location."
|
||||
);
|
||||
}
|
||||
|
||||
done();
|
||||
};
|
||||
viewer.addHandler('open', openHandler);
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('zoomTo no ref point', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
@ -866,8 +1005,8 @@
|
||||
);
|
||||
assertPointsEquals(
|
||||
assert,
|
||||
viewport.getCenter(),
|
||||
expectedCenters[i],
|
||||
viewport.getCenter(),
|
||||
1e-14,
|
||||
"Panned to the correct location."
|
||||
);
|
||||
@ -879,6 +1018,45 @@
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('zoomTo flipped with ref point', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
viewer.removeHandler('open', openHandler);
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
viewport.setFlip(true);
|
||||
|
||||
var expectedFlippedCenters = [
|
||||
new OpenSeadragon.Point(5, 5),
|
||||
new OpenSeadragon.Point(4.7505, 4.7505),
|
||||
new OpenSeadragon.Point(4.6005, 4.7505),
|
||||
new OpenSeadragon.Point(4.8455, 4.9955),
|
||||
new OpenSeadragon.Point(5.2205, 5.3705),
|
||||
new OpenSeadragon.Point(5.2205, 5.3705),
|
||||
];
|
||||
|
||||
for (var i = 0; i < testZoomLevels.length; i++) {
|
||||
viewport.zoomTo(testZoomLevels[i], testPoints[i], true);
|
||||
assert.propEqual(
|
||||
viewport.getZoom(),
|
||||
testZoomLevels[i],
|
||||
"Zoomed flipped to the correct level."
|
||||
);
|
||||
assertPointsEquals(
|
||||
assert,
|
||||
expectedFlippedCenters[i],
|
||||
viewport.getCenter(),
|
||||
1e-14,
|
||||
"Panned flipped to the correct location."
|
||||
);
|
||||
}
|
||||
|
||||
done();
|
||||
};
|
||||
viewer.addHandler('open', openHandler);
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('rotation', function(assert){
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
@ -890,6 +1068,28 @@
|
||||
assert.propEqual(viewport.getRotation, 90, "Rotation should be 90 degrees");
|
||||
viewport.setRotation(-75);
|
||||
assert.propEqual(viewport.getRotation, -75, "Rotation should be -75 degrees");
|
||||
|
||||
done();
|
||||
};
|
||||
|
||||
viewer.addHandler('open', openHandler);
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('rotation (flipped)', function(assert){
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
viewer.removeHandler('open', openHandler);
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
viewport.setFlip(true);
|
||||
|
||||
assert.propEqual(viewport.getRotation, 0, "Original flipped rotation should be 0 degrees");
|
||||
viewport.setRotation(90);
|
||||
assert.propEqual(viewport.getRotation, 90, "Flipped rotation should be 90 degrees");
|
||||
viewport.setRotation(-75);
|
||||
assert.propEqual(viewport.getRotation, -75, "Flipped rotation should be -75 degrees");
|
||||
|
||||
done();
|
||||
};
|
||||
|
||||
@ -1140,4 +1340,44 @@
|
||||
});
|
||||
});
|
||||
|
||||
QUnit.test('toggleFlipState', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
viewer.removeHandler('open', openHandler);
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
assert.deepEqual(viewport.getFlip(), false, "Get original flip state should be false");
|
||||
|
||||
viewport.toggleFlip();
|
||||
assert.deepEqual(viewport.getFlip(), true, "Toggling flip state variable, viewport should be true");
|
||||
|
||||
viewport.toggleFlip();
|
||||
assert.deepEqual(viewport.getFlip(), false, "Toggling back flip state variable, viewport should be false again");
|
||||
|
||||
done();
|
||||
};
|
||||
viewer.addHandler('open', openHandler);
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
QUnit.test('setFlipState', function(assert) {
|
||||
var done = assert.async();
|
||||
var openHandler = function(event) {
|
||||
viewer.removeHandler('open', openHandler);
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
assert.deepEqual(viewport.getFlip(), false, "Get original flip state should be false");
|
||||
|
||||
viewport.setFlip(true);
|
||||
assert.deepEqual(viewport.getFlip(), true, "Setting flip state variable should be true");
|
||||
|
||||
viewport.setFlip(false);
|
||||
assert.deepEqual(viewport.getFlip(), false, "Unsetting flip state variable, viewport should be false again");
|
||||
|
||||
done();
|
||||
};
|
||||
viewer.addHandler('open', openHandler);
|
||||
viewer.open(DZI_PATH);
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user