mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-01-31 23:21:42 +03:00
Code Issues Projects Releases Wiki Activity

Navigator update with tests update

Browse Source 
Navigator hosted in viewer with navigatorMaintainSizeRatio==false (the
default) now maintains its area and aspect ratio.

Tests added for most (all?) navigator configurations.
This commit is contained in:
Mark Salsbery 2014-01-18 18:19:22 -08:00
parent 5c94df34a1
commit 601f533fcf
2 changed files with 152 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/navigator.js
View File

@ -51,6 +51,7 @@ $.Navigator = function( options ){
var viewer = options.viewer, var viewer = options.viewer,
viewerSize, viewerSize,
navigatorSize,
unneededElement; unneededElement;
//We may need to create a new element and id if they did not //We may need to create a new element and id if they did not
@ -190,10 +191,10 @@ $.Navigator = function( options ){
viewerSize = $.getElementSize( viewer.element ); viewerSize = $.getElementSize( viewer.element );
this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px'; this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px'; this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px';
if ( options.maintainSizeRatio ) { this.oldViewerSize = viewerSize;
this.oldViewerSize = viewerSize;
}
} }
navigatorSize = $.getElementSize( this.element );
this.elementArea = navigatorSize.x * navigatorSize.y;
} }
this.oldContainerSize = new $.Point( 0, 0 ); this.oldContainerSize = new $.Point( 0, 0 );
@ -250,18 +251,26 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
update: function( viewport ) { update: function( viewport ) {
var viewerSize, var viewerSize,
newWidth,
newHeight,
bounds, bounds,
topleft, topleft,
bottomright; bottomright;
if ( this.maintainSizeRatio ) { viewerSize = $.getElementSize( this.viewer.element );
viewerSize = $.getElementSize( this.viewer.element ); if ( !viewerSize.equals( this.oldViewerSize ) ) {
if ( !viewerSize.equals( this.oldViewerSize ) ) { this.oldViewerSize = viewerSize;
this.element.style.height = ( viewerSize.y * this.sizeRatio ) + 'px'; if ( this.maintainSizeRatio ) {
this.element.style.width = ( viewerSize.x * this.sizeRatio ) + 'px'; newWidth = viewerSize.x * this.sizeRatio;
this.oldViewerSize = viewerSize; newHeight = viewerSize.y * this.sizeRatio;
this.updateSize();
} }
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 ) { if( viewport && this.viewport ) {

188
test/navigator.js
View File

@ -52,21 +52,27 @@ QUnit.config.autostart = false;
var assessNavigatorLocation = function (expectedX, expectedY) { var assessNavigatorLocation = function (expectedX, expectedY) {
var navigator = $(".navigator"); var navigator = $(".navigator");
Util.assessNumericValue(expectedX, navigator.offset().left, 10, ' Navigator x position'); Util.assessNumericValue(expectedX, navigator.offset().left, 10, ' Navigator x Position');
Util.assessNumericValue(expectedY, navigator.offset().top, 10, ' Navigator y position'); Util.assessNumericValue(expectedY, navigator.offset().top, 10, ' Navigator y Position');
}; };
var assessNavigatorSize = function (expectedWidth, expectedHeight) { var assessNavigatorSize = function (expectedWidth, expectedHeight, msg) {
var navigator = $(".navigator"); var navigator = $(".navigator");
Util.assessNumericValue(expectedWidth, navigator.width(), 2, ' Navigator width'); Util.assessNumericValue(expectedWidth, navigator.width(), 2, ' Navigator Width ' + (msg ? msg : ''));
Util.assessNumericValue(expectedHeight, navigator.height(), 2, ' Navigator height'); Util.assessNumericValue(expectedHeight, navigator.height(), 2, ' Navigator Height ' + (msg ? msg : ''));
}; };
var assessNavigatorAspectRatio = function (expectedAspectRatio) { var assessNavigatorAspectRatio = function (expectedAspectRatio, variance, msg) {
var navigator = $(".navigator"); var navigator = $(".navigator");
Util.assessNumericValue(expectedAspectRatio, navigator.width() / navigator.height(), 0.0001, ' Navigator aspect ratio'); 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 (recalcForResize) { var navigatorRegionBoundsInPoints = function (recalcForResize) {
@ -270,34 +276,48 @@ QUnit.config.autostart = false;
simulateNavigatorDrag(viewer.navigator, delta.x * displayRegionWidth, delta.y * displayRegionHeight); 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 assessNavigatorViewerPlacement = function (seadragonProperties, testProperties) {
var navigatorOperationScenarios = [ var navigatorOperationScenarios = [
{interactionOperation:clickOnNavigator("TOPRIGHT"), {interactionOperation:clickOnNavigator("TOPRIGHT"),
assessmentOperation:assessViewerInCorner("TOPRIGHT"), assessmentOperation:assessViewerInCorner("TOPRIGHT"),
assessmentMessage:"After click on navigator on top right" }, assessmentMessage:"After click on navigator on top right" },
{interactionOperation:dragNavigatorBackToCenter, {interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter, assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from top right" }, assessmentMessage:"After drag on navigator from top right" },
{interactionOperation:clickOnNavigator("BOTTOMLEFT"), {interactionOperation:clickOnNavigator("BOTTOMLEFT"),
assessmentOperation:assessViewerInCorner("BOTTOMLEFT"), assessmentOperation:assessViewerInCorner("BOTTOMLEFT"),
assessmentMessage:"After click on navigator on bottom left" }, assessmentMessage:"After click on navigator on bottom left" },
{interactionOperation:dragNavigatorBackToCenter, {interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter, assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from bottom left" }, assessmentMessage:"After drag on navigator from bottom left" },
{interactionOperation:clickOnNavigator("BOTTOMRIGHT"), {interactionOperation:clickOnNavigator("BOTTOMRIGHT"),
assessmentOperation:assessViewerInCorner("BOTTOMRIGHT"), assessmentOperation:assessViewerInCorner("BOTTOMRIGHT"),
assessmentMessage:"After click on navigator on bottom right" }, assessmentMessage:"After click on navigator on bottom right" },
{interactionOperation:dragNavigatorBackToCenter, {interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter, assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from bottom right" }, assessmentMessage:"After drag on navigator from bottom right" },
{interactionOperation:clickOnNavigator("TOPLEFT"), {interactionOperation:clickOnNavigator("TOPLEFT"),
assessmentOperation:assessViewerInCorner("TOPLEFT"), assessmentOperation:assessViewerInCorner("TOPLEFT"),
assessmentMessage:"After click on navigator on top left" }, assessmentMessage:"After click on navigator on top left" },
{interactionOperation:dragNavigatorBackToCenter, {interactionOperation:dragNavigatorBackToCenter,
assessmentOperation:assessViewerInCenter, assessmentOperation:assessViewerInCenter,
assessmentMessage:"After drag on navigator from top left" } assessmentMessage:"After drag on navigator from top left" }
], ],
autoFadeWaitTime = 100; 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%)"}
],
autoFadeWaitTime = 100,
navigatorElement = null,
viewerElement = null,
viewerOriginalSize = null,
navigatorOriginalSize = null;
seadragonProperties.visibilityRatio = 1; seadragonProperties.visibilityRatio = 1;
viewer = OpenSeadragon(seadragonProperties); viewer = OpenSeadragon(seadragonProperties);
@ -341,38 +361,89 @@ QUnit.config.autostart = false;
waitForViewer(assessAfterDragOnViewer); waitForViewer(assessAfterDragOnViewer);
}; };
var assessAfterResizeViewer = function () {
viewer.viewport.zoomTo(viewer.viewport.getZoom() * 2);
waitForViewer(assessAfterZoomOnViewer);
};
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) {
assessAfterResizeViewer();
}
else {
resizeElement(viewerElement, viewerOriginalSize.x * viewerResizeScenarios[nextStep].resizeFactorX, viewerOriginalSize.y * viewerResizeScenarios[nextStep].resizeFactorY);
waitForViewer(assessViewerResizeAndTakeNextStep(nextStep));
}
};
};
var captureInitialStateThenAct = function () { var captureInitialStateThenAct = function () {
assessDisplayRegion("After image load"); assessDisplayRegion("After image load");
testProperties.determineExpectationsAndAssessNavigatorLocation(seadragonProperties, testProperties); testProperties.determineExpectationsAndAssessNavigatorLocation(seadragonProperties, testProperties);
viewer.viewport.zoomTo(viewer.viewport.getZoom() * 2); viewerOriginalSize = new OpenSeadragon.Point(viewerElement.width(), viewerElement.height());
waitForViewer(assessAfterZoomOnViewer); 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 () { 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); waitForViewer(captureInitialStateThenAct);
}; };
var assessAutoFadeDisabled = function () { 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); waitForViewer(captureInitialStateThenAct);
}; };
var openHandler = function () { var openHandler = function () {
viewer.removeHandler('open', openHandler); viewer.removeHandler('open', openHandler);
navigatorElement = $(testProperties.navigatorLocator);
viewerElement = $("#" + seadragonProperties.id);
//TODO This should be testProperties.testAutoFade, but test hangs. Fix this!
if (!testProperties.testAutohide) { if (!testProperties.testAutohide) {
waitForViewer(captureInitialStateThenAct); waitForViewer(captureInitialStateThenAct);
} }
else { 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 = { var event = {
clientX:1, clientX:1,
clientY:1 clientY:1
}; };
$("#" + seadragonProperties.id).simulate('blur', event); viewerrElement.simulate('blur', event);
if (testProperties.expectedAutoFade) { if (testProperties.expectedAutoFade) {
setTimeout(assessAutoFadeTriggered,autoFadeWaitTime); setTimeout(assessAutoFadeTriggered,autoFadeWaitTime);
@ -391,6 +462,7 @@ QUnit.config.autostart = false;
tileSources:'/test/data/wide.dzi', tileSources:'/test/data/wide.dzi',
showNavigator:true, showNavigator:true,
navigatorSizeRatio:0.2, navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: false,
animationTime:0 animationTime:0
}, },
{ {
@ -403,7 +475,7 @@ QUnit.config.autostart = false;
assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(), assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
mainViewerElement.offset().top); mainViewerElement.offset().top);
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio); assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height()); assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
} }
}); });
}); });
@ -415,6 +487,7 @@ QUnit.config.autostart = false;
tileSources:'/test/data/tall.dzi', tileSources:'/test/data/tall.dzi',
showNavigator:true, showNavigator:true,
navigatorSizeRatio:0.2, navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: false,
animationTime:0, animationTime:0,
controlsFadeDelay:0, controlsFadeDelay:0,
controlsFadeLength:1 controlsFadeLength:1
@ -430,7 +503,7 @@ QUnit.config.autostart = false;
assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(), assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
mainViewerElement.offset().top); mainViewerElement.offset().top);
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio); assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height()); assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
} }
}); });
}); });
@ -443,6 +516,7 @@ QUnit.config.autostart = false;
showNavigationControl: false, showNavigationControl: false,
showNavigator:true, showNavigator:true,
navigatorSizeRatio:0.2, navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: false,
navigatorPosition: 'TOP_LEFT', navigatorPosition: 'TOP_LEFT',
animationTime:0, animationTime:0,
controlsFadeDelay:0, controlsFadeDelay:0,
@ -459,7 +533,7 @@ QUnit.config.autostart = false;
assessNavigatorLocation(mainViewerElement.offset().left, assessNavigatorLocation(mainViewerElement.offset().left,
mainViewerElement.offset().top); mainViewerElement.offset().top);
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio); assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height()); assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
} }
}); });
}); });
@ -472,6 +546,7 @@ QUnit.config.autostart = false;
showNavigationControl: false, showNavigationControl: false,
showNavigator:true, showNavigator:true,
navigatorSizeRatio:0.2, navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: true,
navigatorPosition: 'TOP_RIGHT', navigatorPosition: 'TOP_RIGHT',
animationTime:0, animationTime:0,
controlsFadeDelay:0, controlsFadeDelay:0,
@ -488,7 +563,7 @@ QUnit.config.autostart = false;
assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(), assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
mainViewerElement.offset().top); mainViewerElement.offset().top);
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio); assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height()); assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
} }
}); });
}); });
@ -501,6 +576,7 @@ QUnit.config.autostart = false;
showNavigationControl: false, showNavigationControl: false,
showNavigator:true, showNavigator:true,
navigatorSizeRatio:0.2, navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: false,
navigatorPosition: 'BOTTOM_LEFT', navigatorPosition: 'BOTTOM_LEFT',
animationTime:0, animationTime:0,
controlsFadeDelay:0, controlsFadeDelay:0,
@ -517,7 +593,7 @@ QUnit.config.autostart = false;
assessNavigatorLocation(mainViewerElement.offset().left, assessNavigatorLocation(mainViewerElement.offset().left,
mainViewerElement.offset().top + mainViewerElement.height() - navigatorElement.height()); mainViewerElement.offset().top + mainViewerElement.height() - navigatorElement.height());
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio); assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height()); assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
} }
}); });
}); });
@ -530,6 +606,7 @@ QUnit.config.autostart = false;
showNavigationControl: false, showNavigationControl: false,
showNavigator:true, showNavigator:true,
navigatorSizeRatio:0.2, navigatorSizeRatio:0.2,
navigatorMaintainSizeRatio: false,
navigatorPosition: 'BOTTOM_RIGHT', navigatorPosition: 'BOTTOM_RIGHT',
animationTime:0, animationTime:0,
controlsFadeDelay:0, controlsFadeDelay:0,
@ -546,7 +623,7 @@ QUnit.config.autostart = false;
assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(), assessNavigatorLocation(mainViewerElement.offset().left + mainViewerElement.width() - navigatorElement.width(),
mainViewerElement.offset().top + mainViewerElement.height() - navigatorElement.height()); mainViewerElement.offset().top + mainViewerElement.height() - navigatorElement.height());
assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio); assessNavigatorSize(mainViewerElement.width() * seadragonProperties.navigatorSizeRatio, mainViewerElement.height() * seadragonProperties.navigatorSizeRatio);
assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height()); assessNavigatorAspectRatio(mainViewerElement.width() / mainViewerElement.height(), 0.0001);
} }
}); });
}); });
@ -605,18 +682,19 @@ QUnit.config.autostart = false;
}); });
asyncTest('CustomDialogNavigatorElementWithTallImageTallViewer', function () { asyncTest('CustomDialogNavigatorElementWithTallImageTallViewer', function () {
$('#exampleNavigator').dialog({ width: 200, $('#exampleNavigator').dialog({ width: 150,
height:200, height:100,
open: function (event, ui) { open: function (event, ui) {
$('#exampleNavigator').width(200); $('#exampleNavigator').width(150);
$('#exampleNavigator').height(200); $('#exampleNavigator').height(100);
},
resize: function (event, ui) {
//ui.size.width
//ui.size.height
//$('#exampleNavigator').dialog("option", "width", 200);
//$('#exampleNavigator').dialog("option", "width", 200);
} }
//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({ assessNavigatorViewerPlacement({
id:'tallexample', id:'tallexample',