Set overlays position and size with floating point values.

This commit is contained in:
Antoine Vandecreme 2016-03-29 15:29:36 -04:00
parent f6c09ca716
commit 33bd943b7a
2 changed files with 72 additions and 52 deletions

View File

@ -241,9 +241,6 @@
var size = this.size = positionAndSize.size; var size = this.size = positionAndSize.size;
var rotate = positionAndSize.rotate; var rotate = positionAndSize.rotate;
position = position.apply(Math.round);
size = size.apply(Math.round);
// call the onDraw callback if it exists to allow one to overwrite // call the onDraw callback if it exists to allow one to overwrite
// the drawing/positioning/sizing of the overlay // the drawing/positioning/sizing of the overlay
if (this.onDraw) { if (this.onDraw) {

View File

@ -2,6 +2,8 @@
( function() { ( function() {
var viewer; var viewer;
// jQuery.position can give results quite different than what set in style.left
var epsilon = 1;
module( "Overlays", { module( "Overlays", {
setup: function() { setup: function() {
@ -237,30 +239,38 @@
} ] } ]
} ); } );
function checkOverlayPosition( contextMessage ) { function checkOverlayPosition(contextMessage) {
var viewport = viewer.viewport; var viewport = viewer.viewport;
var expPosition = viewport.imageToViewerElementCoordinates( var expPosition = viewport.imageToViewerElementCoordinates(
new OpenSeadragon.Point( 13, 120 ) ).apply( Math.round ); new OpenSeadragon.Point(13, 120));
var actPosition = $( "#overlay" ).position(); var actPosition = $("#overlay").position();
equal( actPosition.left, expPosition.x, "X position mismatch " + contextMessage ); Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
equal( actPosition.top, expPosition.y, "Y position mismatch " + contextMessage ); "X position mismatch " + contextMessage);
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
"Y position mismatch " + contextMessage);
var zoom = viewport.viewportToImageZoom( viewport.getZoom( true ) ); var zoom = viewport.viewportToImageZoom(viewport.getZoom(true));
var expectedWidth = Math.round( 124 * zoom ); var expectedWidth = 124 * zoom;
var expectedHeight = Math.round( 132 * zoom ); var expectedHeight = 132 * zoom;
equal( $( "#overlay" ).width(), expectedWidth, "Width mismatch " + contextMessage ); Util.assessNumericValue($("#overlay").width(), expectedWidth, epsilon,
equal( $( "#overlay" ).height( ), expectedHeight, "Height mismatch " + contextMessage ); "Width mismatch " + contextMessage);
Util.assessNumericValue($("#overlay").height(), expectedHeight, epsilon,
"Height mismatch " + contextMessage);
expPosition = viewport.imageToViewerElementCoordinates( expPosition = viewport.imageToViewerElementCoordinates(
new OpenSeadragon.Point( 400, 500 ) ).apply( Math.round ); new OpenSeadragon.Point(400, 500));
actPosition = $( "#fixed-overlay" ).position(); actPosition = $("#fixed-overlay").position();
equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage ); Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage ); "Fixed overlay X position mismatch " + contextMessage);
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
"Fixed overlay Y position mismatch " + contextMessage);
equal( $( "#fixed-overlay" ).width(), 70, "Fixed overlay width mismatch " + contextMessage ); Util.assessNumericValue($("#fixed-overlay").width(), 70, epsilon,
equal( $( "#fixed-overlay" ).height( ), 60, "Fixed overlay height mismatch " + contextMessage ); "Fixed overlay width mismatch " + contextMessage);
Util.assessNumericValue($("#fixed-overlay").height(), 60, epsilon,
"Fixed overlay height mismatch " + contextMessage);
} }
waitForViewer( function() { waitForViewer( function() {
@ -305,25 +315,33 @@
var viewport = viewer.viewport; var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point( 0.2, 0.1 ) ).apply( Math.round ); new OpenSeadragon.Point(0.2, 0.1));
var actPosition = $( "#overlay" ).position(); var actPosition = $( "#overlay" ).position();
equal( actPosition.left, expPosition.x, "X position mismatch " + contextMessage ); Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
equal( actPosition.top, expPosition.y, "Y position mismatch " + contextMessage ); "X position mismatch " + contextMessage);
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
"Y position mismatch " + contextMessage);
var expectedSize = viewport.deltaPixelsFromPoints( var expectedSize = viewport.deltaPixelsFromPoints(
new OpenSeadragon.Point( 0.5, 0.1 ) ); new OpenSeadragon.Point(0.5, 0.1));
equal( $( "#overlay" ).width(), expectedSize.x, "Width mismatch " + contextMessage ); Util.assessNumericValue($("#overlay").width(), expectedSize.x, epsilon,
equal( $( "#overlay" ).height(), expectedSize.y, "Height mismatch " + contextMessage ); "Width mismatch " + contextMessage);
Util.assessNumericValue($("#overlay").height(), expectedSize.y, epsilon,
"Height mismatch " + contextMessage);
expPosition = viewport.viewportToViewerElementCoordinates( expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point( 0.5, 0.6 ) ).apply( Math.round ); new OpenSeadragon.Point(0.5, 0.6));
actPosition = $( "#fixed-overlay" ).position(); actPosition = $("#fixed-overlay").position();
equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage ); Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage ); "Fixed overlay X position mismatch " + contextMessage);
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
"Fixed overlay Y position mismatch " + contextMessage);
equal( $( "#fixed-overlay" ).width(), 70, "Fixed overlay width mismatch " + contextMessage ); Util.assessNumericValue($("#fixed-overlay").width(), 70, epsilon,
equal( $( "#fixed-overlay" ).height( ), 60, "Fixed overlay height mismatch " + contextMessage ); "Fixed overlay width mismatch " + contextMessage);
Util.assessNumericValue($("#fixed-overlay").height(), 60, epsilon,
"Fixed overlay height mismatch " + contextMessage);
} }
waitForViewer( function() { waitForViewer( function() {
@ -373,22 +391,25 @@
var viewport = viewer.viewport; var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point( 0.2, 0.1 ) ).apply( Math.round ); new OpenSeadragon.Point(0.2, 0.1));
var actPosition = $( "#overlay" ).position(); var actPosition = $("#overlay").position();
equal( actPosition.left, expPosition.x, "X position mismatch " + contextMessage ); Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
equal( actPosition.top, expPosition.y, "Y position mismatch " + contextMessage ); "X position mismatch " + contextMessage);
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
"Y position mismatch " + contextMessage);
} }
function checkFixedOverlayPosition( expectedOffset, contextMessage ) { function checkFixedOverlayPosition( expectedOffset, contextMessage ) {
var viewport = viewer.viewport; var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point( 0.5, 0.6 ) ) new OpenSeadragon.Point(0.5, 0.6))
.apply( Math.round ) .plus(expectedOffset);
.plus( expectedOffset ); var actPosition = $("#fixed-overlay").position();
var actPosition = $( "#fixed-overlay" ).position(); Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage ); "Fixed overlay X position mismatch " + contextMessage);
equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage ); Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
"Fixed overlay Y position mismatch " + contextMessage);
} }
waitForViewer( function() { waitForViewer( function() {
@ -448,12 +469,13 @@
var viewport = viewer.viewport; var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point( 0.5, 0.6 ) ) new OpenSeadragon.Point(0.5, 0.6))
.apply( Math.round ) .plus(expectedOffset);
.plus( expectedOffset ); var actPosition = $("#fixed-overlay").position();
var actPosition = $( "#fixed-overlay" ).position(); Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage ); "Fixed overlay X position mismatch " + contextMessage);
equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage ); Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
"Fixed overlay Y position mismatch " + contextMessage);
} }
waitForViewer( function() { waitForViewer( function() {
@ -502,12 +524,13 @@
var viewport = viewer.viewport; var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point( 0.5, 0.6 ) ) new OpenSeadragon.Point(0.5, 0.6))
.apply( Math.round ) .plus(expectedOffset);
.plus( expectedOffset );
var actPosition = $( "#fixed-overlay" ).position(); var actPosition = $( "#fixed-overlay" ).position();
equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage ); Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage ); "Fixed overlay X position mismatch " + contextMessage);
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
"Fixed overlay Y position mismatch " + contextMessage);
} }
waitForViewer( function() { waitForViewer( function() {