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

Checkpoint. Anchoring click to middle of view. Adding call to apply to constraints on viewer after the click, and additional testing

Browse Source
This commit is contained in:
houseofyin 2013-04-01 22:33:58 -04:00
parent b1809d4c49
commit 5bf4b51925
2 changed files with 83 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/navigator.js
View File

@ -218,8 +218,8 @@ function onCanvasClick( tracker, position, quick, shift ) {
positionInPoints = this.viewport.deltaPointsFromPixels(position); positionInPoints = this.viewport.deltaPointsFromPixels(position);
dimensionsInPoints = this.viewer.viewport.getBounds().getSize(); dimensionsInPoints = this.viewer.viewport.getBounds().getSize();
theNewBounds = new $.Rect( theNewBounds = new $.Rect(
positionInPoints.x, positionInPoints.x - dimensionsInPoints.x/2,
positionInPoints.y, positionInPoints.y - dimensionsInPoints.y/2,
dimensionsInPoints.x, dimensionsInPoints.x,
dimensionsInPoints.y dimensionsInPoints.y
); );
@ -231,6 +231,7 @@ function onCanvasClick( tracker, position, quick, shift ) {
theNewBounds.x = theNewBounds.x - ((this.viewerDimensionsInPoints.x -1) /2 ); theNewBounds.x = theNewBounds.x - ((this.viewerDimensionsInPoints.x -1) /2 );
} }
this.viewer.viewport.fitBounds(theNewBounds); this.viewer.viewport.fitBounds(theNewBounds);
this.viewer.viewport.applyConstraints();
} }
} }
else else

102
test/navigator.js
View File

@ -9,8 +9,8 @@ QUnit.config.autostart = false;
var maxHeightFactor = null; var maxHeightFactor = null;
var spaceFromLeftEdgeOfViewerToContentStart = null; var spaceFromLeftEdgeOfViewerToContentStart = null;
var spaceFromTopEdgeOfViewerToContentStart = null; var spaceFromTopEdgeOfViewerToContentStart = null;
var widthOfViewerToContentOnNavigator = null; var widthOfViewerContentOnNavigator = null;
var heightOfViewerToContentOnNavigator = null; var heightOfViewerContentOnNavigator = null;
module("navigator", { module("navigator", {
setup:function () { setup:function () {
@ -35,8 +35,8 @@ QUnit.config.autostart = false;
maxHeightFactor = null; maxHeightFactor = null;
spaceFromLeftEdgeOfViewerToContentStart = null; spaceFromLeftEdgeOfViewerToContentStart = null;
spaceFromTopEdgeOfViewerToContentStart = null; spaceFromTopEdgeOfViewerToContentStart = null;
widthOfViewerToContentOnNavigator = null; widthOfViewerContentOnNavigator = null;
heightOfViewerToContentOnNavigator = null; heightOfViewerContentOnNavigator = null;
}; };
var resetDom = function() var resetDom = function()
@ -88,6 +88,7 @@ QUnit.config.autostart = false;
maxHeightFactor = viewer.source.aspectRatio; maxHeightFactor = viewer.source.aspectRatio;
} }
spaceFromLeftEdgeOfViewerToContentStart = ((1/maxHeightFactor)-1) / 2 * maxHeightFactor * navigator.width(); spaceFromLeftEdgeOfViewerToContentStart = ((1/maxHeightFactor)-1) / 2 * maxHeightFactor * navigator.width();
spaceFromTopEdgeOfViewerToContentStart = 0;
} }
else else
{ {
@ -101,8 +102,8 @@ QUnit.config.autostart = false;
leftScalingFactor = 1; leftScalingFactor = 1;
} }
} }
widthOfViewerToContentOnNavigator = navigator.width() - 2 * spaceFromLeftEdgeOfViewerToContentStart; widthOfViewerContentOnNavigator = navigator.width() - 2 * spaceFromLeftEdgeOfViewerToContentStart;
heightOfViewerToContentOnNavigator = navigator.height() - 2 * spaceFromTopEdgeOfViewerToContentStart; heightOfViewerContentOnNavigator = navigator.height() - 2 * spaceFromTopEdgeOfViewerToContentStart;
} }
var expectedDisplayRegionWidth = navigator.width() / viewer.viewport.getZoom() * maxHeightFactor; var expectedDisplayRegionWidth = navigator.width() / viewer.viewport.getZoom() * maxHeightFactor;
@ -145,10 +146,12 @@ QUnit.config.autostart = false;
currentDisplayRegionLeft = displayRegion.position().left; currentDisplayRegionLeft = displayRegion.position().left;
currentDisplayWidth = displayRegion.width(); currentDisplayWidth = displayRegion.width();
viewerAndNavigatorDisplayReady = viewer.drawer !== null && viewerAndNavigatorDisplayReady = viewer.drawer !== null &&
!viewer.drawer.needsUpdate() &&
currentDisplayWidth > 0 && currentDisplayWidth > 0 &&
equalsWithSomeVariance(lastDisplayRegionLeft, currentDisplayRegionLeft,.0001) && equalsWithSomeVariance(lastDisplayRegionLeft, currentDisplayRegionLeft,.0001) &&
equalsWithSomeVariance(lastDisplayWidth,currentDisplayWidth,.0001) && equalsWithSomeVariance(lastDisplayWidth,currentDisplayWidth,.0001) &&
equalsWithSomeVariance(viewer.viewport.getBounds(true).x,viewer.viewport.getBounds().x,.0001) && equalsWithSomeVariance(viewer.viewport.getBounds(true).x,viewer.viewport.getBounds().x,.0001) &&
equalsWithSomeVariance(viewer.viewport.getBounds(true).y,viewer.viewport.getBounds().y,.0001) &&
equalsWithSomeVariance(viewer.viewport.getBounds(true).width,viewer.viewport.getBounds().width,.0001); equalsWithSomeVariance(viewer.viewport.getBounds(true).width,viewer.viewport.getBounds().width,.0001);
} }
catch(err) catch(err)
@ -168,6 +171,7 @@ QUnit.config.autostart = false;
lastDisplayRegionLeft + ":" + currentDisplayRegionLeft + ":" + lastDisplayRegionLeft + ":" + currentDisplayRegionLeft + ":" +
lastDisplayWidth + ":" + currentDisplayWidth + ":" + lastDisplayWidth + ":" + currentDisplayWidth + ":" +
viewer.viewport.getBounds(true).x + ":" + viewer.viewport.getBounds().x + ":" + viewer.viewport.getBounds(true).x + ":" + viewer.viewport.getBounds().x + ":" +
viewer.viewport.getBounds(true).y + ":" + viewer.viewport.getBounds().y + ":" +
viewer.viewport.getBounds(true).width + ":" + viewer.viewport.getBounds().width + ":" + viewer.viewport.getBounds(true).width + ":" + viewer.viewport.getBounds().width + ":" +
count ); count );
} }
@ -194,37 +198,81 @@ QUnit.config.autostart = false;
var simulateNavigatorDrag = function(viewer, distanceX, distanceY) { var simulateNavigatorDrag = function(viewer, distanceX, distanceY) {
var $canvas = $(viewer.element).find('.displayregion'); var $canvas = $(viewer.element).find('.displayregion');
var event = { var event = {
dx: Math.floor($canvas.width() * distanceX), dx: Math.floor(distanceX),
dy: Math.floor($canvas.height() * distanceY) dy: Math.floor(distanceY)
}; };
$canvas $canvas
.simulate('drag', event); .simulate('drag', event);
}; };
var clickOnNavigator = function(theContentCorner) var assessViewerInCorner = function(theContentCorner)
{ {
var xPos, yPos; var expectedXCoordinate, expecteYCoordinate;
if (theContentCorner === "TOPRIGHT") if (theContentCorner === "TOPLEFT")
{ {
xPos = 0; expectedXCoordinate = 0;
yPos = 0; expecteYCoordinate = 0;
} }
else if (theContentCorner === "TOPRIGHT") else if (theContentCorner === "TOPRIGHT")
{ {
xPos = 1; expectedXCoordinate = 1-viewer.viewport.getBounds().width;
yPos = 0; expecteYCoordinate = 0;
} }
else if (theContentCorner === "BOTTOMRIGHT") else if (theContentCorner === "BOTTOMRIGHT")
{ {
xPos = 0; expectedXCoordinate = 1-viewer.viewport.getBounds().width;
yPos = 1; expecteYCoordinate = 1/viewer.source.aspectRatio/2 - viewer.viewport.getBounds().height;
} }
else if (theContentCorner === "BOTTOMLEFT") else if (theContentCorner === "BOTTOMLEFT")
{ {
xPos = 1; expectedXCoordinate = 0;
yPos = 1; expecteYCoordinate = 1/viewer.source.aspectRatio/2 - viewer.viewport.getBounds().height;
}
if (viewer.viewport.getBounds().width < 1)
{
assessNumericValueWithSomeVariance(expectedXCoordinate, viewer.viewport.getBounds().x,.04, ' Viewer at ' + theContentCorner + ', x coord');
}
if (viewer.viewport.getBounds().height < 1/viewer.source.aspectRatio)
{
assessNumericValueWithSomeVariance(expecteYCoordinate, viewer.viewport.getBounds().y,.04, ' Viewer at ' + theContentCorner + ', y coord');
}
};
var assessViewerInCenter = function()
{
var yPositionVariance = .04;
if (viewer.source.aspectRatio < 1)
{
yPositionVariance = yPositionVariance / viewer.source.aspectRatio;
}
assessNumericValueWithSomeVariance(1/viewer.source.aspectRatio/2, viewer.viewport.getCenter().y,yPositionVariance, ' Viewer at center, y coord');
assessNumericValueWithSomeVariance(.5, viewer.viewport.getCenter().x,.4, ' Viewer at center, x coord');
};
var clickOnNavigator = function(theContentCorner)
{
var xPos, yPos;
if (theContentCorner === "TOPLEFT")
{
xPos = spaceFromLeftEdgeOfViewerToContentStart;
yPos = spaceFromTopEdgeOfViewerToContentStart;
}
else if (theContentCorner === "TOPRIGHT")
{
xPos = spaceFromLeftEdgeOfViewerToContentStart + widthOfViewerContentOnNavigator;
yPos = spaceFromTopEdgeOfViewerToContentStart;
}
else if (theContentCorner === "BOTTOMRIGHT")
{
xPos = spaceFromLeftEdgeOfViewerToContentStart + widthOfViewerContentOnNavigator;
yPos = spaceFromTopEdgeOfViewerToContentStart + heightOfViewerContentOnNavigator;
}
else if (theContentCorner === "BOTTOMLEFT")
{
xPos = spaceFromLeftEdgeOfViewerToContentStart;
yPos = spaceFromTopEdgeOfViewerToContentStart + heightOfViewerContentOnNavigator;
} }
simulateNavigatorClick(viewer.navigator, xPos, yPos); simulateNavigatorClick(viewer.navigator, xPos, yPos);
}; };
@ -232,21 +280,31 @@ QUnit.config.autostart = false;
var dragNavigatorBackToCenter = function() var dragNavigatorBackToCenter = function()
{ {
var start = viewer.viewport.getBounds().getTopLeft(); var start = viewer.viewport.getBounds().getTopLeft();
var target = new OpenSeadragon.Point(0.5,1/viewer.source.aspectRatio/2); var target = new OpenSeadragon.Point(0.5 - viewer.viewport.getBounds().width/2,
1/viewer.source.aspectRatio/2 - viewer.viewport.getBounds().height/2);
var delta = target.minus(start); var delta = target.minus(start);
simulateNavigatorDrag(viewer.navigator, delta.x, delta.y); if (viewer.source.aspectRatio < 1)
{
{
delta.y = delta.y * viewer.source.aspectRatio;
}
}
simulateNavigatorDrag(viewer.navigator, delta.x * widthOfViewerContentOnNavigator, delta.y * heightOfViewerContentOnNavigator);
}; };
var assessNavigatorViewerPlacement = function (seadragonProperties, testProperties) { var assessNavigatorViewerPlacement = function (seadragonProperties, testProperties) {
seadragonProperties.visibilityRatio = 1;
viewer = OpenSeadragon(seadragonProperties); viewer = OpenSeadragon(seadragonProperties);
var assessAfterDragNavigatorFromTopRight = function() { var assessAfterDragNavigatorFromTopRight = function() {
assessNavigatorDisplayRegionAndMainViewerState("After drag on navigator"); assessNavigatorDisplayRegionAndMainViewerState("After drag on navigator");
assessViewerInCenter();
start(); start();
}; };
var assessAfterClickOnNavigatorTopRight = function() { var assessAfterClickOnNavigatorTopRight = function() {
assessNavigatorDisplayRegionAndMainViewerState("After click on navigator"); assessNavigatorDisplayRegionAndMainViewerState("After click on navigator");
assessViewerInCorner("TOPRIGHT");
dragNavigatorBackToCenter(); dragNavigatorBackToCenter();
waitForViewer(assessAfterDragNavigatorFromTopRight); waitForViewer(assessAfterDragNavigatorFromTopRight);
}; };