From aaad805727876c6179577ce8c645f739a0ff70c3 Mon Sep 17 00:00:00 2001
From: Antoine Vandecreme <antoine.vandecreme@nist.gov>
Date: Wed, 5 Feb 2014 14:57:47 -0500
Subject: [PATCH] Add test for fixed overlay + update doc
---
src/overlay.js | 17 +++++++---
test/overlays.js | 84 ++++++++++++++++++++++++++++++++++++++++++++++--
2 files changed, 93 insertions(+), 8 deletions(-)
diff --git a/src/overlay.js b/src/overlay.js
index c87c84e1..5ae11efb 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -35,7 +35,8 @@
(function( $ ){
/**
- * An enumeration of positions that an overlay may be assigned relative to the viewport.
+ * An enumeration of positions that an overlay may be assigned relative to
+ * the viewport.
* @member OverlayPlacement
* @memberof OpenSeadragon
* @static
@@ -69,8 +70,14 @@
* @memberof OpenSeadragon
* @param {Object} options
* @param {Element} options.element
- * @param {OpenSeadragon.Point|OpenSeadragon.Rect} options.location
- * @param {OpenSeadragon.OverlayPlacement} options.placement - Only used if location is an {@link OpenSeadragon.Point}.
+ * @param {OpenSeadragon.Point|OpenSeadragon.Rect} options.location - The
+ * location of the overlay on the image. If a {@link OpenSeadragon.Point}
+ * is specified, the overlay will keep a constant size independently of the
+ * zoom. It a {@link OpenSeadragon.Rect} is specified, the overlay size will
+ * be adjusted when the zoom changes.
+ * @param {OpenSeadragon.OverlayPlacement} [options.placement=OpenSeadragon.OverlayPlacement.TOP_LEFT]
+ * Relative position to the viewport.
+ * Only used if location is a {@link OpenSeadragon.Point}.
* @param {OpenSeadragon.Overlay.OnDrawCallback} options.onDraw
*/
$.Overlay = function( element, location, placement ) {
@@ -86,9 +93,9 @@
*/
var options;
- if( $.isPlainObject( element ) ){
+ if ( $.isPlainObject( element ) ) {
options = element;
- } else{
+ } else {
options = {
element: element,
location: location,
diff --git a/test/overlays.js b/test/overlays.js
index 4f4c0c1f..60f931dc 100644
--- a/test/overlays.js
+++ b/test/overlays.js
@@ -1,12 +1,14 @@
/* global QUnit, module, Util, $, console, test, asyncTest, start, ok, equal */
( function() {
- var debug = false,
- viewer;
+ var viewer;
module( "Overlays", {
setup: function() {
var example = $( '<div id="example-overlays"></div>' ).appendTo( "#qunit-fixture" );
+ var fixedOverlay = $( '<div id="fixed-overlay"></div>' ).appendTo(example);
+ fixedOverlay.width(70);
+ fixedOverlay.height(60);
testLog.reset();
},
@@ -227,7 +229,11 @@
width: 124,
height: 132,
id: "overlay"
- } ]
+ }, {
+ px: 400,
+ py: 500,
+ id: "fixed-overlay"
+ }]
} );
function checkOverlayPosition( contextMessage ) {
@@ -244,6 +250,16 @@
var expectedHeight = Math.ceil( 132 * zoom );
equal( $( "#overlay" ).width(), expectedWidth, "Width mismatch " + contextMessage );
equal( $( "#overlay" ).height( ), expectedHeight, "Height mismatch " + contextMessage );
+
+
+ expPosition = viewport.imageToViewerElementCoordinates(
+ new OpenSeadragon.Point( 400, 500 ) ).apply( Math.floor );
+ actPosition = $( "#fixed-overlay" ).position();
+ equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage );
+ equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage );
+
+ equal( $( "#fixed-overlay" ).width(), 70, "Fixed overlay width mismatch " + contextMessage );
+ equal( $( "#fixed-overlay" ).height( ), 60, "Fixed overlay height mismatch " + contextMessage );
}
waitForViewer( function() {
@@ -263,4 +279,66 @@
} );
} );
+ asyncTest( 'Overlays size in points', function() {
+
+ viewer = OpenSeadragon( {
+ id: 'example-overlays',
+ prefixUrl: '/build/openseadragon/images/',
+ tileSources: [ '/test/data/testpattern.dzi', '/test/data/testpattern.dzi' ],
+ springStiffness: 100, // Faster animation = faster tests
+ overlays: [ {
+ x: 0.2,
+ y: 0.1,
+ width: 0.5,
+ height: 0.1,
+ id: "overlay"
+ },{
+ x: 0.5,
+ y: 0.6,
+ id: "fixed-overlay"
+ } ]
+ } );
+
+ function checkOverlayPosition( contextMessage ) {
+ var viewport = viewer.viewport;
+
+ var expPosition = viewport.viewportToViewerElementCoordinates(
+ new OpenSeadragon.Point( 0.2, 0.1 ) ).apply( Math.floor );
+ var actPosition = $( "#overlay" ).position();
+ equal( actPosition.left, expPosition.x, "X position mismatch " + contextMessage );
+ equal( actPosition.top, expPosition.y, "Y position mismatch " + contextMessage );
+
+ var expectedSize = viewport.deltaPixelsFromPoints(
+ new OpenSeadragon.Point(0.5, 0.1));
+ equal( $( "#overlay" ).width(), expectedSize.x, "Width mismatch " + contextMessage );
+ equal( $( "#overlay" ).height( ), expectedSize.y, "Height mismatch " + contextMessage );
+
+
+ expPosition = viewport.viewportToViewerElementCoordinates(
+ new OpenSeadragon.Point( 0.5, 0.6 ) ).apply( Math.floor );
+ actPosition = $( "#fixed-overlay" ).position();
+ equal( actPosition.left, expPosition.x, "Fixed overlay X position mismatch " + contextMessage );
+ equal( actPosition.top, expPosition.y, "Fixed overlay Y position mismatch " + contextMessage );
+
+ equal( $( "#fixed-overlay" ).width(), 70, "Fixed overlay width mismatch " + contextMessage );
+ equal( $( "#fixed-overlay" ).height( ), 60, "Fixed overlay height mismatch " + contextMessage );
+ }
+
+ waitForViewer( function() {
+ checkOverlayPosition( "after opening using viewport coordinates" );
+
+ viewer.viewport.zoomBy( 1.1 ).panBy( new OpenSeadragon.Point( 0.1, 0.2 ) );
+ waitForViewer( function() {
+ checkOverlayPosition( "after zoom and pan using viewport coordinates" );
+
+ viewer.viewport.goHome();
+ waitForViewer( function() {
+ checkOverlayPosition( "after goHome using viewport coordinates" );
+ start();
+ } );
+ } );
+
+ } );
+ } );
+
} )();