mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-25 06:36:11 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #310 from msalsbery/Navigator-Resize

Browse Source 
Enhanced Navigator Resizability (#280, #296)
This commit is contained in:
iangilman 2014-01-21 09:04:20 -08:00
commit 9ecb69e1d8
8 changed files with 607 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
changelog.txt
View File

@ -6,6 +6,11 @@ OPENSEADRAGON CHANGELOG
* Fixed: Nav button highlight states aren't quite aligned on Firefox (#303)
* Added ControlAnchor options for default controls (#304)
* Enabled basic cross-domain tile loading without tainting canvas (works in Chrome and Firefox) (#308)
* Added a ControlAnchor.ABSOLUTE enumeration. Enables absolute positioning of control elements in the viewer (#310)
* Added a 'navigator-scroll' event to Navigator. Fired when mousewheel/pinch events occur in the navigator (#310)
* Added a navigatorMaintainSizeRatio option. If set to true, the navigator minimap resizes when the viewer element is resized (#310)
* Added 'ABSOLUTE' as a navigatorPosition option, along with corresponding navigatorTop, navigatorLeft options. Allows the navigator minimap to be placed anywhere in the viewer (#310)
* Enhanced the navigatorTop, navigatorLeft, navigatorHeight, and navigatorWidth options to allow a number for pixel units or a string for other element units (%, em, etc.) (#310)
* Additional enhancements for IIIF support (#315)
1.0.0:

34
src/control.js
View File

@ -46,13 +46,15 @@
* @property {Number} TOP_RIGHT
* @property {Number} BOTTOM_LEFT
* @property {Number} BOTTOM_RIGHT
* @property {Number} ABSOLUTE
*/
$.ControlAnchor = {
NONE: 0,
TOP_LEFT: 1,
TOP_RIGHT: 2,
BOTTOM_RIGHT: 3,
BOTTOM_LEFT: 4
BOTTOM_LEFT: 4,
ABSOLUTE: 5
};
/**
@ -110,14 +112,30 @@ $.Control = function ( element, options, container ) {
* @member {Element} wrapper
* @memberof OpenSeadragon.Control#
*/
this.wrapper = $.makeNeutralElement( "span" );
this.wrapper.style.display = "inline-block";
this.wrapper.appendChild( this.element );
if ( this.anchor == $.ControlAnchor.ABSOLUTE ) {
this.wrapper = $.makeNeutralElement( "div" );
this.wrapper.style.position = "absolute";
this.wrapper.style.top = typeof ( options.top ) == "number" ? ( options.top + 'px' ) : options.top;
this.wrapper.style.left = typeof ( options.left ) == "number" ? (options.left + 'px' ) : options.left;
this.wrapper.style.height = typeof ( options.height ) == "number" ? ( options.height + 'px' ) : options.height;
this.wrapper.style.width = typeof ( options.width ) == "number" ? ( options.width + 'px' ) : options.width;
this.wrapper.style.margin = "0px";
this.wrapper.style.padding = "0px";
if ( this.anchor == $.ControlAnchor.NONE ) {
// IE6 fix
this.wrapper.style.width = this.wrapper.style.height = "100%";
this.element.style.position = "relative";
this.element.style.top = "0px";
this.element.style.left = "0px";
this.element.style.height = "100%";
this.element.style.width = "100%";
} else {
this.wrapper = $.makeNeutralElement( "span" );
this.wrapper.style.display = "inline-block";
if ( this.anchor == $.ControlAnchor.NONE ) {
// IE6 fix
this.wrapper.style.width = this.wrapper.style.height = "100%";
}
}
this.wrapper.appendChild( this.element );
if (options.attachToViewer ) {
if ( this.anchor == $.ControlAnchor.TOP_RIGHT ||
@ -161,7 +179,7 @@ $.Control.prototype = /** @lends OpenSeadragon.Control.prototype */{
*/
setVisible: function( visible ) {
this.wrapper.style.display = visible ?
"inline-block" :
( this.anchor == $.ControlAnchor.ABSOLUTE ? 'block' : 'inline-block' ) :
"none";
},

5
src/controldock.js
View File

@ -126,6 +126,11 @@
element.style.paddingLeft = "0px";
element.style.paddingTop = "0px";
break;
case $.ControlAnchor.ABSOLUTE:
div = this.container;
element.style.margin = "0px";
element.style.padding = "0px";
break;
default:
case $.ControlAnchor.NONE:
div = this.container;

181
src/navigator.js
View File

@ -50,7 +50,8 @@
$.Navigator = function( options ){
var viewer = options.viewer,
viewerSize = $.getElementSize( viewer.element),
viewerSize,
navigatorSize,
unneededElement;
//We may need to create a new element and id if they did not
@ -73,6 +74,12 @@ $.Navigator = function( options ){
options.controlOptions.anchor = $.ControlAnchor.TOP_RIGHT;
} else if( 'TOP_LEFT' == options.position ){
options.controlOptions.anchor = $.ControlAnchor.TOP_LEFT;
} else if( 'ABSOLUTE' == options.position ){
options.controlOptions.anchor = $.ControlAnchor.ABSOLUTE;
options.controlOptions.top = options.top;
options.controlOptions.left = options.left;
options.controlOptions.height = options.height;
options.controlOptions.width = options.width;
}
}
@ -99,12 +106,12 @@ $.Navigator = function( options ){
showSequenceControl: false,
immediateRender: true,
blendTime: 0,
animationTime: 0
animationTime: 0,
autoResize: options.autoResize
});
options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio;
this.viewerSizeInPoints = viewer.viewport.deltaPointsFromPixels(viewerSize);
this.borderWidth = 2;
//At some browser magnification levels the display regions lines up correctly, but at some there appears to
//be a one pixel gap.
@ -112,14 +119,16 @@ $.Navigator = function( options ){
this.totalBorderWidths = new $.Point(this.borderWidth*2, this.borderWidth*2).minus(this.fudge);
(function( style, borderWidth ){
style.margin = '0px';
style.border = borderWidth + 'px solid #555';
style.padding = '0px';
style.background = '#000';
style.opacity = 0.8;
style.overflow = 'hidden';
}( this.element.style, this.borderWidth));
if ( options.controlOptions.anchor != $.ControlAnchor.NONE ) {
(function( style, borderWidth ){
style.margin = '0px';
style.border = borderWidth + 'px solid #555';
style.padding = '0px';
style.background = '#000';
style.opacity = 0.8;
style.overflow = 'hidden';
}( this.element.style, this.borderWidth));
}
this.displayRegion = $.makeNeutralElement( "div" );
this.displayRegion.id = this.element.id + '-displayregion';
@ -152,15 +161,11 @@ $.Navigator = function( options ){
this.element.innerTracker = new $.MouseTracker({
element: this.element,
dragHandler: $.delegate( this, onCanvasDrag ),
clickHandler: $.delegate( this, onCanvasClick ),
releaseHandler: $.delegate( this, onCanvasRelease ),
scrollHandler: function(){
//dont scroll the page up and down if the user is scrolling
//in the navigator
return false;
}
element: this.element,
dragHandler: $.delegate( this, onCanvasDrag ),
clickHandler: $.delegate( this, onCanvasClick ),
releaseHandler: $.delegate( this, onCanvasRelease ),
scrollHandler: $.delegate( this, onCanvasScroll )
}).setTracking( true );
/*this.displayRegion.outerTracker = new $.MouseTracker({
@ -178,14 +183,22 @@ $.Navigator = function( options ){
options.controlOptions
);
if( options.width && options.height ){
this.element.style.width = options.width + 'px';
this.element.style.height = options.height + 'px';
} else {
this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px';
this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
if ( options.controlOptions.anchor != $.ControlAnchor.ABSOLUTE && options.controlOptions.anchor != $.ControlAnchor.NONE ) {
if ( options.width && options.height ) {
this.element.style.height = typeof ( options.height ) == "number" ? ( options.height + 'px' ) : options.height;
this.element.style.width = typeof ( options.width ) == "number" ? ( options.width + 'px' ) : options.width;
} else {
viewerSize = $.getElementSize( viewer.element );
this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px';
this.oldViewerSize = viewerSize;
}
navigatorSize = $.getElementSize( this.element );
this.elementArea = navigatorSize.x * navigatorSize.y;
}
this.oldContainerSize = new $.Point( 0, 0 );
$.Viewer.apply( this, [ options ] );
this.element.getElementsByTagName('form')[0].appendChild( this.displayRegion );
@ -199,18 +212,71 @@ $.Navigator = function( options ){
$.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.Navigator.prototype */{
/**
* Used to notify the navigator when its size has changed.
* Especially useful when {@link OpenSeadragon.Options}.navigatorAutoResize is set to false and the navigator is resizable.
* @function
*/
update: function( viewport ){
updateSize: function () {
if ( this.viewport ) {
var containerSize = new $.Point(
(this.container.clientWidth === 0 ? 1 : this.container.clientWidth),
(this.container.clientHeight === 0 ? 1 : this.container.clientHeight)
);
if ( !containerSize.equals( this.oldContainerSize ) ) {
var oldBounds = this.viewport.getBounds();
var oldCenter = this.viewport.getCenter();
this.viewport.resize( containerSize, true );
var imageHeight = 1 / this.source.aspectRatio;
var newWidth = oldBounds.width <= 1 ? oldBounds.width : 1;
var newHeight = oldBounds.height <= imageHeight ?
oldBounds.height : imageHeight;
var newBounds = new $.Rect(
oldCenter.x - ( newWidth / 2.0 ),
oldCenter.y - ( newHeight / 2.0 ),
newWidth,
newHeight
);
this.viewport.fitBounds( newBounds, true );
this.oldContainerSize = containerSize;
this.drawer.update();
}
}
},
var bounds,
/**
* Used to update the navigator minimap's viewport rectangle when a change in the viewer's viewport occurs.
* @function
* @param {OpenSeadragon.Viewport} The viewport this navigator is tracking.
*/
update: function( viewport ) {
var viewerSize,
newWidth,
newHeight,
bounds,
topleft,
bottomright;
if( viewport && this.viewport ){
viewerSize = $.getElementSize( this.viewer.element );
if ( !viewerSize.equals( this.oldViewerSize ) ) {
this.oldViewerSize = viewerSize;
if ( this.maintainSizeRatio ) {
newWidth = viewerSize.x * this.sizeRatio;
newHeight = viewerSize.y * this.sizeRatio;
}
else {
newWidth = Math.sqrt(this.elementArea * (viewerSize.x / viewerSize.y));
newHeight = this.elementArea / newWidth;
}
this.element.style.width = newWidth + 'px';
this.element.style.height = newHeight + 'px';
this.updateSize();
}
if( viewport && this.viewport ) {
bounds = viewport.getBounds( true );
topleft = this.viewport.pixelFromPoint( bounds.getTopLeft());
bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight()).minus(this.totalBorderWidths);
topleft = this.viewport.pixelFromPoint( bounds.getTopLeft(), false );
bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight(), false ).minus( this.totalBorderWidths );
//update style for navigator-box
(function(style) {
@ -229,7 +295,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
},
open: function( source ){
open: function( source ) {
this.updateSize();
var containerSize = this.viewer.viewport.containerSize.times( this.sizeRatio );
if( source.tileSize > containerSize.x ||
source.tileSize > containerSize.y ){
@ -256,21 +323,7 @@ function onCanvasClick( event ) {
dimensions;
if (! this.drag) {
if ( this.viewer.viewport ) {
viewerPosition = this.viewport.deltaPointsFromPixels( event.position );
dimensions = this.viewer.viewport.getBounds().getSize();
newBounds = new $.Rect(
viewerPosition.x - dimensions.x/2,
viewerPosition.y - dimensions.y/2,
dimensions.x,
dimensions.y
);
if (this.viewer.source.aspectRatio > this.viewer.viewport.getAspectRatio()) {
newBounds.y = newBounds.y - ((this.viewerSizeInPoints.y - (1/this.viewer.source.aspectRatio)) /2 );
}
else {
newBounds.x = newBounds.x - ((this.viewerSizeInPoints.x -1) /2 );
}
this.viewer.viewport.fitBounds(newBounds);
this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ) );
this.viewer.viewport.applyConstraints();
}
}
@ -320,16 +373,30 @@ function onCanvasRelease( event ) {
* @function
*/
function onCanvasScroll( event ) {
var factor;
if ( this.viewer.viewport ) {
factor = Math.pow( this.zoomPerScroll, event.scroll );
this.viewer.viewport.zoomBy(
factor,
this.viewport.getCenter()
);
this.viewer.viewport.applyConstraints();
}
//cancels event
/**
* Raised when a scroll event occurs on the {@link OpenSeadragon.Viewer#navigator} element (mouse wheel, touch pinch, etc.).
*
* @event navigator-scroll
* @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 {Number} scroll - The scroll delta for the event.
* @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.
*/
this.viewer.raiseEvent( 'navigator-scroll', {
tracker: event.eventSource,
position: event.position,
scroll: event.scroll,
shift: event.shift,
originalEvent: event.originalEvent
});
//dont scroll the page up and down if the user is scrolling
//in the navigator
return false;
}

56
src/openseadragon.js
View File

@ -271,20 +271,38 @@
* Set to true to make the navigator minimap appear.
*
* @property {Boolean} [navigatorId=navigator-GENERATED DATE]
* Set the ID of a div to hold the navigator minimap. If one is not specified,
* one will be generated and placed on top of the main image
* The ID of a div to hold the navigator minimap.
* If an ID is specified, the navigatorPosition, navigatorSizeRatio, navigatorMaintainSizeRatio, and navigatorTop|Left|Height|Width options will be ignored.
* If an ID is not specified, a div element will be generated and placed on top of the main image.
*
* @property {Number} [navigatorHeight=null]
* TODO: Implement this. Currently not used.
*
* @property {Number} [navigatorWidth=null]
* TODO: Implement this. Currently not used.
*
* @property {Number} [navigatorPosition=null]
* TODO: Implement this. Currently not used.
* @property {String} [navigatorPosition='TOP_RIGHT']
* Valid values are 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', 'BOTTOM_RIGHT', or 'ABSOLUTE'.<br>
* If 'ABSOLUTE' is specified, then navigatorTop|Left|Height|Width determines the size and position of the navigator minimap in the viewer, and navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.<br>
* For 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', and 'BOTTOM_RIGHT', the navigatorSizeRatio or navigatorHeight|Width values determine the size of the navigator minimap.
*
* @property {Number} [navigatorSizeRatio=0.2]
* Ratio of navigator size to viewer size.
* Ratio of navigator size to viewer size. Ignored if navigatorHeight|Width are specified.
*
* @property {Boolean} [navigatorMaintainSizeRatio=false]
* If true, the navigator minimap is resized (using navigatorSizeRatio) when the viewer size changes.
*
* @property {Number|String} [navigatorTop=null]
* Specifies the location of the navigator minimap (see navigatorPosition).
*
* @property {Number|String} [navigatorLeft=null]
* Specifies the location of the navigator minimap (see navigatorPosition).
*
* @property {Number|String} [navigatorHeight=null]
* Specifies the size of the navigator minimap (see navigatorPosition).
* If specified, navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.
*
* @property {Number|String} [navigatorWidth=null]
* Specifies the size of the navigator minimap (see navigatorPosition).
* If specified, navigatorSizeRatio and navigatorMaintainSizeRatio are ignored.
*
* @property {Boolean} [navigatorAutoResize=true]
* Set to false to prevent polling for navigator size changes. Useful for providing custom resize behavior.
* Setting to false can also improve performance when the navigator is configured to a fixed size.
*
* @property {Number} [controlsFadeDelay=2000]
* The number of milliseconds to wait once the user has stopped interacting
@ -713,12 +731,16 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
mouseNavEnabled: true, //GENERAL MOUSE INTERACTIVITY
//VIEWPORT NAVIGATOR SETTINGS
showNavigator: false,
navigatorId: null,
navigatorHeight: null,
navigatorWidth: null,
navigatorPosition: null,
navigatorSizeRatio: 0.2,
showNavigator: false,
navigatorId: null,
navigatorPosition: null,
navigatorSizeRatio: 0.2,
navigatorMaintainSizeRatio: false,
navigatorTop: null,
navigatorLeft: null,
navigatorHeight: null,
navigatorWidth: null,
navigatorAutoResize: true,
// INITIAL ROTATION
degrees: 0,

31
src/viewer.js
View File

@ -910,6 +910,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
}
if ( this.navigator && this.viewport ) {
this.navigator.update( this.viewport );
}
/**
* Raised when the viewer has changed to/from full-page mode (see {@link OpenSeadragon.Viewer#setFullPage}).
*
@ -991,6 +995,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
_this.element.style.height = _this.fullPageStyleHeight;
}
}
if ( _this.navigator && _this.viewport ) {
_this.navigator.update( _this.viewport );
}
/**
* Raised when the viewer has changed to/from full-screen mode (see {@link OpenSeadragon.Viewer#setFullScreen}).
*
@ -1469,16 +1476,20 @@ function openTileSource( viewer, source ) {
_this.navigator.open( source );
} else {
_this.navigator = new $.Navigator({
id: _this.navigatorId,
position: _this.navigatorPosition,
sizeRatio: _this.navigatorSizeRatio,
height: _this.navigatorHeight,
width: _this.navigatorWidth,
tileSources: source,
tileHost: _this.tileHost,
prefixUrl: _this.prefixUrl,
overlays: _this.overlays,
viewer: _this
id: _this.navigatorId,
position: _this.navigatorPosition,
sizeRatio: _this.navigatorSizeRatio,
maintainSizeRatio: _this.navigatorMaintainSizeRatio,
top: _this.navigatorTop,
left: _this.navigatorLeft,
width: _this.navigatorWidth,
height: _this.navigatorHeight,
autoResize: _this.navigatorAutoResize,
tileSources: source,
tileHost: _this.tileHost,
prefixUrl: _this.prefixUrl,
overlays: _this.overlays,
viewer: _this
});
}
}

481
test/navigator.js
View File

@ -3,12 +3,11 @@
QUnit.config.autostart = false;
(function () {
var viewer,
var debug = false,
viewer,
displayRegion,
navigator,
navigatorAspectRatio,
leftScalingFactor,
maxHeightFactor,
navigatorScaleFactor,
contentStartFromLeft,
contentStartFromTop,
displayRegionWidth,
@ -42,9 +41,7 @@ QUnit.config.autostart = false;
}
displayRegion = null;
navigator = null;
navigatorAspectRatio = null;
leftScalingFactor = null;
maxHeightFactor = null;
navigatorScaleFactor = null;
contentStartFromLeft = null;
contentStartFromTop = null;
displayRegionWidth = null;
@ -55,8 +52,27 @@ QUnit.config.autostart = false;
var assessNavigatorLocation = function (expectedX, expectedY) {
var navigator = $(".navigator");
Util.assessNumericValue(expectedX, navigator.offset().left, 4, ' Navigator x position');
Util.assessNumericValue(expectedY, navigator.offset().top, 4, ' Navigator y position');
Util.assessNumericValue(expectedX, navigator.offset().left, 10, ' Navigator x Position');
Util.assessNumericValue(expectedY, navigator.offset().top, 10, ' Navigator y Position');
};
var assessNavigatorSize = function (expectedWidth, expectedHeight, msg) {
var navigator = $(".navigator");
Util.assessNumericValue(expectedWidth, navigator.width(), 2, ' Navigator Width ' + (msg ? msg : ''));
Util.assessNumericValue(expectedHeight, navigator.height(), 2, ' Navigator Height ' + (msg ? msg : ''));
};
var assessNavigatorAspectRatio = function (expectedAspectRatio, variance, msg) {
var navigator = $(".navigator");
Util.assessNumericValue(expectedAspectRatio, navigator.width() / navigator.height(), variance, ' Navigator Aspect Ratio ' + (msg ? msg : ''));
};
var assessNavigatorArea = function (expectedArea, msg) {
var navigator = $(".navigator");
Util.assessNumericValue(expectedArea, navigator.width() * navigator.height(), Math.max(navigator.width(), navigator.height()), ' Navigator Area ' + (msg ? msg : ''));
};
var navigatorRegionBoundsInPoints = function () {
@ -65,46 +81,47 @@ QUnit.config.autostart = false;
expectedDisplayRegionHeight,
expectedDisplayRegionXLocation,
expectedDisplayRegionYLocation;
if (navigator === null) {
maxHeightFactor = 1;
navigator = $(".navigator");
navigatorAspectRatio = navigator.height() / navigator.width();
leftScalingFactor = navigatorAspectRatio * viewer.source.aspectRatio;
if (viewer.source.aspectRatio < 1) {
if (viewer.source.aspectRatio < navigatorAspectRatio) {
maxHeightFactor = viewer.source.aspectRatio * navigatorAspectRatio;
}
else {
maxHeightFactor = viewer.source.aspectRatio;
}
contentStartFromLeft = ((1 / maxHeightFactor) - 1) / 2 * maxHeightFactor * navigator.width();
contentStartFromTop = 0;
}
else {
if (viewer.source.aspectRatio < navigatorAspectRatio) {
contentStartFromTop = (navigatorAspectRatio - (1 / viewer.source.aspectRatio)) / 2 / navigatorAspectRatio * navigator.height();
}
else {
contentStartFromTop = (navigatorAspectRatio - (1 / viewer.source.aspectRatio)) / 2 / navigatorAspectRatio * navigator.height();
leftScalingFactor = 1;
}
}
displayRegionWidth = navigator.width() - 2 * contentStartFromLeft;
displayRegionHeight = navigator.height() - 2 * contentStartFromTop;
}
expectedDisplayRegionWidth = navigator.width() / viewer.viewport.getZoom() * maxHeightFactor;
expectedDisplayRegionHeight = navigator.height() / viewer.viewport.getZoom() * maxHeightFactor;
expectedDisplayRegionXLocation = viewer.viewport.getBounds().x * maxHeightFactor * navigator.width() + contentStartFromLeft;
expectedDisplayRegionYLocation = viewer.viewport.getBounds().y * leftScalingFactor * navigator.width() + contentStartFromTop;
if (navigator === null) {
navigator = $(".navigator");
navigatorScaleFactor = Math.min(navigator.width() / viewer.viewport.contentSize.x, navigator.height() / viewer.viewport.contentSize.y);
displayRegionWidth = viewer.viewport.contentSize.x * navigatorScaleFactor;
displayRegionHeight = viewer.viewport.contentSize.y * navigatorScaleFactor;
contentStartFromLeft = (navigator.width() - displayRegionWidth) / 2;
contentStartFromTop = (navigator.height() - displayRegionHeight) / 2;
}
expectedDisplayRegionWidth = viewer.viewport.getBounds().width * displayRegionWidth;
expectedDisplayRegionHeight = viewer.viewport.getBounds().height * displayRegionHeight * viewer.source.aspectRatio;
expectedDisplayRegionXLocation = viewer.viewport.getBounds().x * displayRegionWidth + contentStartFromLeft;
expectedDisplayRegionYLocation = viewer.viewport.getBounds().y * displayRegionHeight * viewer.source.aspectRatio + contentStartFromTop;
regionBoundsInPoints = new OpenSeadragon.Rect(expectedDisplayRegionXLocation, expectedDisplayRegionYLocation, expectedDisplayRegionWidth, expectedDisplayRegionHeight);
if (debug) {
console.log('Image width: ' + viewer.viewport.contentSize.x + '\n' +
'Image height: ' + viewer.viewport.contentSize.y + '\n' +
'navigator.width(): ' + navigator.width() + '\n' +
'navigator.height(): ' + navigator.height() + '\n' +
'navigatorScaleFactor: ' + navigatorScaleFactor + '\n' +
'contentStartFromLeft: ' + contentStartFromLeft + '\n' +
'contentStartFromTop: ' + contentStartFromTop + '\n' +
'displayRegionWidth: ' + displayRegionWidth + '\n' +
'displayRegionHeight: ' + displayRegionHeight + '\n' +
'expectedDisplayRegionXLocation: ' + expectedDisplayRegionXLocation + '\n' +
'expectedDisplayRegionYLocation: ' + expectedDisplayRegionYLocation + '\n' +
'expectedDisplayRegionWidth: ' + expectedDisplayRegionWidth + '\n' +
'expectedDisplayRegionHeight: ' + expectedDisplayRegionHeight + '\n'
);
}
return regionBoundsInPoints;
};
var assessDisplayRegion = function (status) {
if (debug) {
console.log(status);
}
var expectedBounds = navigatorRegionBoundsInPoints();
Util.assessNumericValue(expectedBounds.width, displayRegion.width() + viewer.navigator.totalBorderWidths.x, 2, status + ' Width synchronization');
Util.assessNumericValue(expectedBounds.height, displayRegion.height() + viewer.navigator.totalBorderWidths.y, 2, status + ' Height synchronization');
@ -259,34 +276,53 @@ QUnit.config.autostart = false;
simulateNavigatorDrag(viewer.navigator, delta.x * displayRegionWidth, delta.y * displayRegionHeight);
};
var resizeElement = function ($element, width, height) {
$element.width(width);
$element.height(height);
};
var assessNavigatorViewerPlacement = function (seadragonProperties, testProperties) {
var navigatorOperationScenarios = [
{interactionOperation:clickOnNavigator("TOPRIGHT"),
assessmentOperation:assessViewerInCorner("TOPRIGHT"),
assessmentMessage:"After click on navigator on top right" },
{interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from top right" },
{interactionOperation:clickOnNavigator("BOTTOMLEFT"),
assessmentOperation:assessViewerInCorner("BOTTOMLEFT"),
assessmentMessage:"After click on navigator on bottom left" },
{interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from bottom left" },
{interactionOperation:clickOnNavigator("BOTTOMRIGHT"),
assessmentOperation:assessViewerInCorner("BOTTOMRIGHT"),
assessmentMessage:"After click on navigator on bottom right" },
{interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from bottom right" },
{interactionOperation:clickOnNavigator("TOPLEFT"),
assessmentOperation:assessViewerInCorner("TOPLEFT"),
assessmentMessage:"After click on navigator on top left" },
{interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from top left" }
],
autoFadeWaitTime = 100;
{interactionOperation:clickOnNavigator("TOPRIGHT"),
assessmentOperation:assessViewerInCorner("TOPRIGHT"),
assessmentMessage:"After click on navigator on top right" },
{interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from top right" },
{interactionOperation:clickOnNavigator("BOTTOMLEFT"),
assessmentOperation:assessViewerInCorner("BOTTOMLEFT"),
assessmentMessage:"After click on navigator on bottom left" },
{interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from bottom left" },
{interactionOperation:clickOnNavigator("BOTTOMRIGHT"),
assessmentOperation:assessViewerInCorner("BOTTOMRIGHT"),
assessmentMessage:"After click on navigator on bottom right" },
{interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from bottom right" },
{interactionOperation:clickOnNavigator("TOPLEFT"),
assessmentOperation:assessViewerInCorner("TOPLEFT"),
assessmentMessage:"After click on navigator on top left" },
{interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from top left" }
],
viewerResizeScenarios = [
{resizeFactorX:0.5, resizeFactorY:1.0, assessmentMessage:"After Viewer Resize (50%, 100%)"},
{resizeFactorX:1.0, resizeFactorY:0.5, assessmentMessage:"After Viewer Resize (100%, 50%)"},
{resizeFactorX:1.0, resizeFactorY:1.0, assessmentMessage:"After Viewer Resize (100%, 100%)"}
],
navigatorResizeScenarios = [
{resizeFactorX:0.75, resizeFactorY:1.0, assessmentMessage:"After Navigator Resize (75%, 100%)"},
{resizeFactorX:1.0, resizeFactorY:0.75, assessmentMessage:"After Navigator Resize (100%, 75%)"},
{resizeFactorX:1.0, resizeFactorY:1.0, assessmentMessage:"After Navigator Resize (100%, 100%)"}
],
autoFadeWaitTime = 100,
navigatorElement = null,
viewerElement = null,
viewerOriginalSize = null,
navigatorOriginalSize = null;
seadragonProperties.visibilityRatio = 1;
viewer = OpenSeadragon(seadragonProperties);
@ -330,38 +366,112 @@ QUnit.config.autostart = false;
waitForViewer(assessAfterDragOnViewer);
};
var assessAfterResizeNavigator = function () {
viewer.viewport.zoomTo(viewer.viewport.getZoom() * 2);
waitForViewer(assessAfterZoomOnViewer);
};
var assessNavigatorResizeAndTakeNextStep = function (step) {
return function () {
var nextStep = step + 1;
assessNavigatorSize(navigatorOriginalSize.x * navigatorResizeScenarios[step].resizeFactorX, navigatorOriginalSize.y * navigatorResizeScenarios[step].resizeFactorY, navigatorResizeScenarios[step].assessmentMessage);
assessDisplayRegion(navigatorResizeScenarios[step].assessmentMessage);
if (step === viewerResizeScenarios.length - 1) {
assessAfterResizeNavigator();
}
else {
resizeElement(navigatorElement, navigatorOriginalSize.x * navigatorResizeScenarios[nextStep].resizeFactorX, navigatorOriginalSize.y * navigatorResizeScenarios[nextStep].resizeFactorY);
waitForViewer(assessNavigatorResizeAndTakeNextStep(nextStep));
}
};
};
var assessViewerResizeAndTakeNextStep = function (step) {
return function () {
var nextStep = step + 1;
if (seadragonProperties.navigatorId) {
// Navigator hosted in outside element...size shouldn't change
assessNavigatorSize(navigatorOriginalSize.x, navigatorOriginalSize.y, viewerResizeScenarios[step].assessmentMessage);
}
else {
// Navigator hosted in viewer
if (seadragonProperties.navigatorPosition && seadragonProperties.navigatorPosition == 'ABSOLUTE') {
// Navigator positioned 'ABSOLUTE'...size shouldn't change
assessNavigatorSize(navigatorOriginalSize.x, navigatorOriginalSize.y, viewerResizeScenarios[step].assessmentMessage);
}
else {
// Navigator positioned 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', or 'BOTTOM_RIGHT'
if (seadragonProperties.navigatorMaintainSizeRatio) {
// Navigator should maintain aspect ratio and size proportioned to viewer size
assessNavigatorAspectRatio(viewerElement.width() / viewerElement.height(), 0.0001, viewerResizeScenarios[step].assessmentMessage);
assessNavigatorSize(viewerElement.width() * seadragonProperties.navigatorSizeRatio, viewerElement.height() * seadragonProperties.navigatorSizeRatio, viewerResizeScenarios[step].assessmentMessage);
}
else {
// Navigator should maintain aspect ratio and area
// Variances are loosened up here, since 1 pixel rounding difference in resizing to maintain area
// can cause a relatively large difference in area and aspect ratio.
assessNavigatorAspectRatio(viewerElement.width() / viewerElement.height(), 0.1, viewerResizeScenarios[step].assessmentMessage);
assessNavigatorArea(navigatorOriginalSize.x * navigatorOriginalSize.y, viewerResizeScenarios[step].assessmentMessage);
}
}
}
if (step === viewerResizeScenarios.length - 1) {
if (seadragonProperties.navigatorId) {
// Navigator hosted in outside element...run navigator resize tests
resizeElement(navigatorElement, navigatorOriginalSize.x * navigatorResizeScenarios[0].resizeFactorX, navigatorOriginalSize.y * navigatorResizeScenarios[0].resizeFactorY);
waitForViewer(assessNavigatorResizeAndTakeNextStep(0));
}
else {
// Navigator hosted in viewer...skip navigator resize tests
assessAfterResizeNavigator();
}
}
else {
resizeElement(viewerElement, viewerOriginalSize.x * viewerResizeScenarios[nextStep].resizeFactorX, viewerOriginalSize.y * viewerResizeScenarios[nextStep].resizeFactorY);
waitForViewer(assessViewerResizeAndTakeNextStep(nextStep));
}
};
};
var captureInitialStateThenAct = function () {
assessDisplayRegion("After image load");
testProperties.determineExpectationsAndAssessNavigatorLocation(seadragonProperties, testProperties);
viewer.viewport.zoomTo(viewer.viewport.getZoom() * 2);
waitForViewer(assessAfterZoomOnViewer);
viewerOriginalSize = new OpenSeadragon.Point(viewerElement.width(), viewerElement.height());
navigatorOriginalSize = new OpenSeadragon.Point(navigatorElement.width(), navigatorElement.height());
resizeElement(viewerElement, viewerOriginalSize.x * viewerResizeScenarios[0].resizeFactorX, viewerOriginalSize.y * viewerResizeScenarios[0].resizeFactorY);
waitForViewer(assessViewerResizeAndTakeNextStep(0));
};
var assessAutoFadeTriggered = function () {
ok($(testProperties.navigatorLocator).parent().css("opacity") < 1, "Expecting navigator to be autofade when in the default location");
ok(navigatorElement.parent().css("opacity") < 1, "Expecting navigator to be autofade when in the default location");
waitForViewer(captureInitialStateThenAct);
};
var assessAutoFadeDisabled = function () {
ok($(testProperties.navigatorLocator).parent().css("opacity") > 0, "Expecting navigator to be always visible when in a custom location");
ok(navigatorElement.parent().css("opacity") > 0, "Expecting navigator to be always visible when in a custom location");
waitForViewer(captureInitialStateThenAct);
};
var openHandler = function () {
viewer.removeHandler('open', openHandler);
navigatorElement = $(testProperties.navigatorLocator);
viewerElement = $("#" + seadragonProperties.id);
//TODO This should be testProperties.testAutoFade, but test hangs. Fix this!
if (!testProperties.testAutohide) {
waitForViewer(captureInitialStateThenAct);
}
else {
ok($(testProperties.navigatorLocator).parent().css("opacity") > 0, "Expecting navigator to be visible initially");
ok(navigatorElement.parent().css("opacity") > 0, "Expecting navigator to be visible initially");
var event = {
clientX:1,
clientY:1
};
$("#" + seadragonProperties.id).simulate('blur', event);
viewerElement.simulate('blur', event);
if (testProperties.expectedAutoFade) {
setTimeout(assessAutoFadeTriggered,autoFadeWaitTime);
@ -379,6 +489,8 @@ QUnit.config.autostart = false;
prefixUrl:'/build/openseadragon/images/',
tileSources:'/test/data/wide.dzi',
showNavigator:true,
navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: false,
animationTime:0
},
{
@ -390,11 +502,192 @@ QUnit.config.autostart = false;
navigatorElement = $(testProperties.navigatorLocator);
assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
mainViewerElement.offset().top);
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
}
});
});
asyncTest('CustomNavigatorLocationWithWideImageWideViewer', function () {
asyncTest('DefaultNavigatorLocationWithTallImageWideViewer', function () {
assessNavigatorViewerPlacement({
id:'wideexample',
prefixUrl:'/build/openseadragon/images/',
tileSources:'/test/data/tall.dzi',
showNavigator:true,
navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: false,
animationTime:0,
controlsFadeDelay:0,
controlsFadeLength:1
},
{
displayRegionLocator:'.navigator .displayregion',
navigatorLocator:'.navigator',
testAutoFade: true,
expectedAutoFade: true,
determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
var mainViewerElement = $("#" + seadragonProperties.id),
navigatorElement = $(testProperties.navigatorLocator);
assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
mainViewerElement.offset().top);
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
}
});
});
asyncTest('TopLeftNavigatorLocation', function () {
assessNavigatorViewerPlacement({
id:'example',
prefixUrl:'/build/openseadragon/images/',
tileSources:'/test/data/testpattern.dzi',
showNavigationControl: false,
showNavigator:true,
navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: false,
navigatorPosition: 'TOP_LEFT',
animationTime:0,
controlsFadeDelay:0,
controlsFadeLength:1
},
{
displayRegionLocator:'.navigator .displayregion',
navigatorLocator:'.navigator',
testAutoFade: true,
expectedAutoFade: true,
determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
var mainViewerElement = $("#" + seadragonProperties.id),
navigatorElement = $(testProperties.navigatorLocator);
assessNavigatorLocation(mainViewerElement.offset().left,
mainViewerElement.offset().top);
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
}
});
});
asyncTest('TopRightNavigatorLocation', function () {
assessNavigatorViewerPlacement({
id:'example',
prefixUrl:'/build/openseadragon/images/',
tileSources:'/test/data/testpattern.dzi',
showNavigationControl: false,
showNavigator:true,
navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: true,
navigatorPosition: 'TOP_RIGHT',
animationTime:0,
controlsFadeDelay:0,
controlsFadeLength:1
},
{
displayRegionLocator:'.navigator .displayregion',
navigatorLocator:'.navigator',
testAutoFade: true,
expectedAutoFade: true,
determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
var mainViewerElement = $("#" + seadragonProperties.id),
navigatorElement = $(testProperties.navigatorLocator);
assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
mainViewerElement.offset().top);
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
}
});
});
asyncTest('BottomLeftNavigatorLocation', function () {
assessNavigatorViewerPlacement({
id:'example',
prefixUrl:'/build/openseadragon/images/',
tileSources:'/test/data/testpattern.dzi',
showNavigationControl: false,
showNavigator:true,
navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: false,
navigatorPosition: 'BOTTOM_LEFT',
animationTime:0,
controlsFadeDelay:0,
controlsFadeLength:1
},
{
displayRegionLocator:'.navigator .displayregion',
navigatorLocator:'.navigator',
testAutoFade: true,
expectedAutoFade: true,
determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
var mainViewerElement = $("#" + seadragonProperties.id),
navigatorElement = $(testProperties.navigatorLocator);
assessNavigatorLocation(mainViewerElement.offset().left,
mainViewerElement.offset().top + mainViewerElement.height() - navigatorElement.height());
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
}
});
});
asyncTest('BottomRightNavigatorLocation', function () {
assessNavigatorViewerPlacement({
id:'example',
prefixUrl:'/build/openseadragon/images/',
tileSources:'/test/data/testpattern.dzi',
showNavigationControl: false,
showNavigator:true,
navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: false,
navigatorPosition: 'BOTTOM_RIGHT',
animationTime:0,
controlsFadeDelay:0,
controlsFadeLength:1
},
{
displayRegionLocator:'.navigator .displayregion',
navigatorLocator:'.navigator',
testAutoFade: true,
expectedAutoFade: true,
determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
var mainViewerElement = $("#" + seadragonProperties.id),
navigatorElement = $(testProperties.navigatorLocator);
assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
mainViewerElement.offset().top + mainViewerElement.height() - navigatorElement.height());
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
}
});
});
asyncTest('AbsoluteNavigatorLocation', function () {
assessNavigatorViewerPlacement({
id:'example',
prefixUrl:'/build/openseadragon/images/',
tileSources:'/test/data/testpattern.dzi',
showNavigationControl: false,
showNavigator:true,
navigatorPosition: 'ABSOLUTE',
navigatorTop: 10,
navigatorLeft: 10,
navigatorHeight: 150,
navigatorWidth: 175,
animationTime:0,
controlsFadeDelay:0,
controlsFadeLength:1
},
{
displayRegionLocator:'.navigator .displayregion',
navigatorLocator:'.navigator',
testAutoFade: true,
expectedAutoFade: true,
determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
var mainViewerElement = $("#" + seadragonProperties.id),
navigatorElement = $(testProperties.navigatorLocator);
assessNavigatorLocation(mainViewerElement.offset().left + seadragonProperties.navigatorLeft,
mainViewerElement.offset().top + seadragonProperties.navigatorTop);
assessNavigatorSize(seadragonProperties.navigatorWidth, seadragonProperties.navigatorHeight);
}
});
});
asyncTest('CustomNavigatorElementWithWideImageWideViewer', function () {
assessNavigatorViewerPlacement({
id:'wideexample',
navigatorId:'exampleNavigator',
@ -416,8 +709,21 @@ QUnit.config.autostart = false;
});
});
asyncTest('CustomDialogNavigatorLocationWithTallImageTallViewer', function () {
$('#exampleNavigator').dialog();
asyncTest('CustomDialogNavigatorElementWithTallImageTallViewer', function () {
$('#exampleNavigator').dialog({ width: 150,
height:100,
open: function (event, ui) {
$('#exampleNavigator').width(150);
$('#exampleNavigator').height(100);
}
//TODO Use this in testing resizable navigator
//resize: function (event, ui) {
// //ui.size.width
// //ui.size.height
// //$('#exampleNavigator').dialog("option", "width", 200);
// //$('#exampleNavigator').dialog("option", "width", 200);
//}
});
assessNavigatorViewerPlacement({
id:'tallexample',
navigatorId:'exampleNavigator',
@ -440,30 +746,7 @@ QUnit.config.autostart = false;
var jqueryDialog = $(testProperties.navigatorLocator);
assessNavigatorLocation(jqueryDialog.offset().left,
jqueryDialog.offset().top);
}
});
});
asyncTest('DefaultNavigatorLocationWithTallImageWideViewer', function () {
assessNavigatorViewerPlacement({
id:'wideexample',
prefixUrl:'/build/openseadragon/images/',
tileSources:'/test/data/tall.dzi',
showNavigator:true,
animationTime:0,
controlsFadeDelay:0,
controlsFadeLength:1
},
{
displayRegionLocator:'.navigator .displayregion',
navigatorLocator:'.navigator',
testAutoFade: true,
expectedAutoFade: true,
determineExpectationsAndAssessNavigatorLocation:function (seadragonProperties, testProperties) {
var mainViewerElement = $("#" + seadragonProperties.id),
navigatorElement = $(testProperties.navigatorLocator);
assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
mainViewerElement.offset().top);
assessNavigatorSize(jqueryDialog.width(), jqueryDialog.height());
}
});
});

5
test/test.css
View File

@ -3,6 +3,11 @@
width: 500px;
}
#exampleNavigator {
height: 100px;
width: 150px;
}
#wideexample {
height: 300px;
width: 700px;