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

Fix viewer.addOverlay and Overlay.getBounds

Browse Source
This commit is contained in:
Antoine Vandecreme 2016-03-31 13:25:59 -04:00
parent 577327a629
commit 70b39d681b
3 changed files with 382 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/overlay.js
View File

@ -383,9 +383,9 @@
var width = this.width; var width = this.width;
var height = this.height; var height = this.height;
if (width === null || height === null) { if (width === null || height === null) {
$.console.assert(viewport, 'The viewport must be specified to' + $.console.assert(!viewport, 'The viewport must be specified to' +
' get the bounds of a not entirely scaling overlay'); ' get the bounds of a not entirely scaling overlay');
var size = viewport.deltaPointsFromPixels(this.size, true); var size = viewport.deltaPointsFromPixelsNoRotate(this.size, true);
if (width === null) { if (width === null) {
width = size.x; width = size.x;
} }
@ -393,8 +393,9 @@
height = size.y; height = size.y;
} }
} }
return new $.Rect( var location = this.location.clone();
this.location.x, this.location.y, width, height); this.adjust(location, new $.Point(width, height));
return new $.Rect(location.x, location.y, width, height);
} }
}; };

45
src/viewer.js
View File

@ -2201,32 +2201,23 @@ function getOverlayObject( viewer, overlay ) {
} }
var location = overlay.location; var location = overlay.location;
if ( !location ) { var width = overlay.width;
if ( overlay.width && overlay.height ) { var height = overlay.height;
location = overlay.px !== undefined ? if (!location) {
viewer.viewport.imageToViewportRectangle( new $.Rect( var x = overlay.x;
overlay.px, var y = overlay.y;
overlay.py, if (overlay.px !== undefined) {
overlay.width, var rect = viewer.viewport.imageToViewportRectangle(new $.Rect(
overlay.height overlay.px,
) ) : overlay.py,
new $.Rect( width || 0,
overlay.x, height || 0));
overlay.y, x = rect.x;
overlay.width, y = rect.y;
overlay.height width = width !== undefined ? rect.width : undefined;
); height = height !== undefined ? rect.height : undefined;
} else {
location = overlay.px !== undefined ?
viewer.viewport.imageToViewportCoordinates( new $.Point(
overlay.px,
overlay.py
) ) :
new $.Point(
overlay.x,
overlay.y
);
} }
location = new $.Point(x, y);
} }
var placement = overlay.placement; var placement = overlay.placement;
@ -2240,8 +2231,8 @@ function getOverlayObject( viewer, overlay ) {
placement: placement, placement: placement,
onDraw: overlay.onDraw, onDraw: overlay.onDraw,
checkResize: overlay.checkResize, checkResize: overlay.checkResize,
width: overlay.width, width: width,
height: overlay.height, height: height,
rotationMode: overlay.rotationMode rotationMode: overlay.rotationMode
}); });
} }

561
test/modules/overlays.js
View File

@ -1,111 +1,111 @@
/* global QUnit, module, Util, $, console, test, asyncTest, start, ok, equal, testLog */ /* global QUnit, module, Util, $, console, test, asyncTest, start, ok, equal, testLog */
( function() { (function() {
var viewer; var viewer;
// jQuery.position can give results quite different than what set in style.left // jQuery.position can give results quite different than what set in style.left
var epsilon = 1; var epsilon = 1;
module( "Overlays", { module("Overlays", {
setup: function() { setup: function() {
var example = $( '<div id="example-overlays"></div>' ).appendTo( "#qunit-fixture" ); var example = $('<div id="example-overlays"></div>').appendTo("#qunit-fixture");
var fixedOverlay = $( '<div id="fixed-overlay"></div>' ).appendTo( example ); var fixedOverlay = $('<div id="fixed-overlay"></div>').appendTo(example);
fixedOverlay.width( 70 ); fixedOverlay.width(70);
fixedOverlay.height( 60 ); fixedOverlay.height(60);
testLog.reset(); testLog.reset();
}, },
teardown: function() { teardown: function() {
resetTestVariables(); resetTestVariables();
} }
} ); });
var resetTestVariables = function() { var resetTestVariables = function() {
if ( viewer ) { if (viewer) {
viewer.close(); viewer.close();
} }
}; };
function waitForViewer( handler, count ) { function waitForViewer(handler, count) {
if ( typeof count !== "number" ) { if (typeof count !== "number") {
count = 0; count = 0;
} }
var ready = viewer.isOpen() && var ready = viewer.isOpen() &&
viewer.drawer !== null && viewer.drawer !== null &&
!viewer.world.needsDraw() && !viewer.world.needsDraw() &&
Util.equalsWithVariance( viewer.viewport.getBounds( true ).x, Util.equalsWithVariance(viewer.viewport.getBounds(true).x,
viewer.viewport.getBounds().x, 0.000 ) && viewer.viewport.getBounds().x, 0.000) &&
Util.equalsWithVariance( viewer.viewport.getBounds( true ).y, Util.equalsWithVariance(viewer.viewport.getBounds(true).y,
viewer.viewport.getBounds().y, 0.000 ) && viewer.viewport.getBounds().y, 0.000) &&
Util.equalsWithVariance( viewer.viewport.getBounds( true ).width, Util.equalsWithVariance(viewer.viewport.getBounds(true).width,
viewer.viewport.getBounds().width, 0.000 ); viewer.viewport.getBounds().width, 0.000);
if ( ready ) { if (ready) {
handler(); handler();
} else if ( count < 50 ) { } else if (count < 50) {
count++; count++;
setTimeout( function() { setTimeout(function() {
waitForViewer( handler, count ); waitForViewer(handler, count);
}, 100 ); }, 100);
} else { } else {
console.log( "waitForViewer:" + viewer.isOpen( ) + ":" + viewer.drawer + console.log("waitForViewer:" + viewer.isOpen( ) + ":" + viewer.drawer +
":" + viewer.world.needsDraw() ); ":" + viewer.world.needsDraw());
handler(); handler();
} }
} }
asyncTest( 'Overlays via viewer options', function() { asyncTest('Overlays via viewer options', function() {
viewer = OpenSeadragon( { viewer = OpenSeadragon({
id: 'example-overlays', id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/', prefixUrl: '/build/openseadragon/images/',
tileSources: [ '/test/data/testpattern.dzi', '/test/data/testpattern.dzi' ], tileSources: ['/test/data/testpattern.dzi', '/test/data/testpattern.dzi'],
springStiffness: 100, // Faster animation = faster tests springStiffness: 100, // Faster animation = faster tests
overlays: [ { overlays: [{
x: 0.1, x: 0.1,
y: 0.4, y: 0.4,
width: 0.09, width: 0.09,
height: 0.09, height: 0.09,
id: "overlay" id: "overlay"
} ] }]
} ); });
viewer.addHandler( 'open', openHandler ); viewer.addHandler('open', openHandler);
function openHandler() { function openHandler() {
viewer.removeHandler( 'open', openHandler ); viewer.removeHandler('open', openHandler);
equal( viewer.overlays.length, 1, "Global overlay should be added." ); equal(viewer.overlays.length, 1, "Global overlay should be added.");
equal( viewer.currentOverlays.length, 1, "Global overlay should be open." ); equal(viewer.currentOverlays.length, 1, "Global overlay should be open.");
viewer.addHandler( 'open', openPageHandler ); viewer.addHandler('open', openPageHandler);
viewer.goToPage( 1 ); viewer.goToPage(1);
} }
function openPageHandler() { function openPageHandler() {
viewer.removeHandler( 'open', openPageHandler ); viewer.removeHandler('open', openPageHandler);
equal( viewer.overlays.length, 1, "Global overlay should stay after page switch." ); equal(viewer.overlays.length, 1, "Global overlay should stay after page switch.");
equal( viewer.currentOverlays.length, 1, "Global overlay should re-open after page switch." ); equal(viewer.currentOverlays.length, 1, "Global overlay should re-open after page switch.");
viewer.addHandler( 'close', closeHandler ); viewer.addHandler('close', closeHandler);
viewer.close(); viewer.close();
} }
function closeHandler() { function closeHandler() {
viewer.removeHandler( 'close', closeHandler ); viewer.removeHandler('close', closeHandler);
equal( viewer.overlays.length, 1, "Global overlay should not be removed on close." ); equal(viewer.overlays.length, 1, "Global overlay should not be removed on close.");
equal( viewer.currentOverlays.length, 0, "Global overlay should be closed on close." ); equal(viewer.currentOverlays.length, 0, "Global overlay should be closed on close.");
start(); start();
} }
} ); });
asyncTest( 'Page Overlays via viewer options', function() { asyncTest('Page Overlays via viewer options', function() {
viewer = OpenSeadragon( { viewer = OpenSeadragon({
id: 'example-overlays', id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/', prefixUrl: '/build/openseadragon/images/',
tileSources: [ { tileSources: [{
Image: { Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008", xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "/test/data/testpattern_files/", Url: "/test/data/testpattern_files/",
@ -117,13 +117,13 @@
Height: 1000 Height: 1000
} }
}, },
overlays: [ { overlays: [{
x: 0.1, x: 0.1,
y: 0.4, y: 0.4,
width: 0.09, width: 0.09,
height: 0.09, height: 0.09,
id: "overlay" id: "overlay"
} ] }]
}, { }, {
Image: { Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008", xmlns: "http://schemas.microsoft.com/deepzoom/2008",
@ -136,96 +136,96 @@
Height: 1000 Height: 1000
} }
} }
} ], }],
springStiffness: 100 // Faster animation = faster tests springStiffness: 100 // Faster animation = faster tests
} ); });
viewer.addHandler( 'open', openHandler ); viewer.addHandler('open', openHandler);
function openHandler() { function openHandler() {
viewer.removeHandler( 'open', openHandler ); viewer.removeHandler('open', openHandler);
equal( viewer.overlays.length, 0, "No global overlay should be added." ); equal(viewer.overlays.length, 0, "No global overlay should be added.");
equal( viewer.currentOverlays.length, 1, "Page overlay should be open." ); equal(viewer.currentOverlays.length, 1, "Page overlay should be open.");
viewer.addHandler( 'open', openPageHandler ); viewer.addHandler('open', openPageHandler);
viewer.goToPage( 1 ); viewer.goToPage(1);
} }
function openPageHandler() { function openPageHandler() {
viewer.removeHandler( 'open', openPageHandler ); viewer.removeHandler('open', openPageHandler);
equal( viewer.overlays.length, 0, "No global overlay should be added after page switch." ); equal(viewer.overlays.length, 0, "No global overlay should be added after page switch.");
equal( viewer.currentOverlays.length, 0, "No page overlay should be opened after page switch." ); equal(viewer.currentOverlays.length, 0, "No page overlay should be opened after page switch.");
viewer.addHandler( 'close', closeHandler ); viewer.addHandler('close', closeHandler);
viewer.close(); viewer.close();
} }
function closeHandler() { function closeHandler() {
viewer.removeHandler( 'close', closeHandler ); viewer.removeHandler('close', closeHandler);
equal( viewer.overlays.length, 0, "No global overlay should be added on close." ); equal(viewer.overlays.length, 0, "No global overlay should be added on close.");
equal( viewer.currentOverlays.length, 0, "Page overlay should be closed on close." ); equal(viewer.currentOverlays.length, 0, "Page overlay should be closed on close.");
start(); start();
} }
} ); });
asyncTest( 'Overlays via addOverlay method', function() { asyncTest('Overlays via addOverlay method', function() {
viewer = OpenSeadragon( { viewer = OpenSeadragon({
id: 'example-overlays', id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/', prefixUrl: '/build/openseadragon/images/',
tileSources: [ '/test/data/testpattern.dzi', '/test/data/testpattern.dzi' ], tileSources: ['/test/data/testpattern.dzi', '/test/data/testpattern.dzi'],
springStiffness: 100 // Faster animation = faster tests springStiffness: 100 // Faster animation = faster tests
} ); });
viewer.addHandler( 'open', openHandler ); viewer.addHandler('open', openHandler);
function openHandler() { function openHandler() {
viewer.removeHandler( 'open', openHandler ); viewer.removeHandler('open', openHandler);
equal( viewer.overlays.length, 0, "No global overlay should be added." ); equal(viewer.overlays.length, 0, "No global overlay should be added.");
equal( viewer.currentOverlays.length, 0, "No overlay should be open." ); equal(viewer.currentOverlays.length, 0, "No overlay should be open.");
var rect = new OpenSeadragon.Rect( 0.1, 0.1, 0.1, 0.1 ); var rect = new OpenSeadragon.Rect(0.1, 0.1, 0.1, 0.1);
var overlay = $( "<div/>" ).prop( "id", "overlay" ).get( 0 ); var overlay = $("<div/>").prop("id", "overlay").get(0);
viewer.addOverlay( overlay, rect ); viewer.addOverlay(overlay, rect);
equal( viewer.overlays.length, 0, "No manual overlay should be added as global overlay." ); equal(viewer.overlays.length, 0, "No manual overlay should be added as global overlay.");
equal( viewer.currentOverlays.length, 1, "A manual overlay should be open." ); equal(viewer.currentOverlays.length, 1, "A manual overlay should be open.");
viewer.addHandler( 'open', openPageHandler ); viewer.addHandler('open', openPageHandler);
viewer.goToPage( 1 ); viewer.goToPage(1);
} }
function openPageHandler() { function openPageHandler() {
viewer.removeHandler( 'open', openPageHandler ); viewer.removeHandler('open', openPageHandler);
equal( viewer.overlays.length, 0, "No global overlay should be added after page switch." ); equal(viewer.overlays.length, 0, "No global overlay should be added after page switch.");
equal( viewer.currentOverlays.length, 0, "Manual overlay should be removed after page switch." ); equal(viewer.currentOverlays.length, 0, "Manual overlay should be removed after page switch.");
viewer.addHandler( 'close', closeHandler ); viewer.addHandler('close', closeHandler);
viewer.close(); viewer.close();
} }
function closeHandler() { function closeHandler() {
viewer.removeHandler( 'close', closeHandler ); viewer.removeHandler('close', closeHandler);
equal( viewer.overlays.length, 0, "No global overlay should be added on close." ); equal(viewer.overlays.length, 0, "No global overlay should be added on close.");
equal( viewer.currentOverlays.length, 0, "Manual overlay should be removed on close." ); equal(viewer.currentOverlays.length, 0, "Manual overlay should be removed on close.");
start(); start();
} }
} ); });
asyncTest( 'Overlays size in pixels', function() { asyncTest('Overlays size in pixels', function() {
viewer = OpenSeadragon( { viewer = OpenSeadragon({
id: 'example-overlays', id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/', prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi', tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests springStiffness: 100, // Faster animation = faster tests
overlays: [ { overlays: [{
px: 13, px: 13,
py: 120, py: 120,
width: 124, width: 124,
@ -236,8 +236,8 @@
py: 500, py: 500,
id: "fixed-overlay", id: "fixed-overlay",
placement: "TOP_LEFT" placement: "TOP_LEFT"
} ] }]
} ); });
function checkOverlayPosition(contextMessage) { function checkOverlayPosition(contextMessage) {
var viewport = viewer.viewport; var viewport = viewer.viewport;
@ -273,31 +273,31 @@
"Fixed overlay height mismatch " + contextMessage); "Fixed overlay height mismatch " + contextMessage);
} }
waitForViewer( function() { waitForViewer(function() {
checkOverlayPosition( "after opening using image coordinates" ); checkOverlayPosition("after opening using image coordinates");
viewer.viewport.zoomBy( 1.1 ).panBy( new OpenSeadragon.Point( 0.1, 0.2 ) ); viewer.viewport.zoomBy(1.1).panBy(new OpenSeadragon.Point(0.1, 0.2));
waitForViewer( function() { waitForViewer(function() {
checkOverlayPosition( "after zoom and pan using image coordinates" ); checkOverlayPosition("after zoom and pan using image coordinates");
viewer.viewport.goHome(); viewer.viewport.goHome();
waitForViewer( function() { waitForViewer(function() {
checkOverlayPosition( "after goHome using image coordinates" ); checkOverlayPosition("after goHome using image coordinates");
start(); start();
} ); });
} ); });
} ); });
} ); });
asyncTest( 'Overlays size in points', function() { asyncTest('Overlays size in points', function() {
viewer = OpenSeadragon( { viewer = OpenSeadragon({
id: 'example-overlays', id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/', prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi', tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests springStiffness: 100, // Faster animation = faster tests
overlays: [ { overlays: [{
x: 0.2, x: 0.2,
y: 0.1, y: 0.1,
width: 0.5, width: 0.5,
@ -308,15 +308,15 @@
y: 0.6, y: 0.6,
id: "fixed-overlay", id: "fixed-overlay",
placement: "TOP_LEFT" placement: "TOP_LEFT"
} ] }]
} ); });
function checkOverlayPosition( contextMessage ) { function checkOverlayPosition(contextMessage) {
var viewport = viewer.viewport; var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(0.2, 0.1)); new OpenSeadragon.Point(0.2, 0.1));
var actPosition = $( "#overlay" ).position(); var actPosition = $("#overlay").position();
Util.assessNumericValue(actPosition.left, expPosition.x, epsilon, Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
"X position mismatch " + contextMessage); "X position mismatch " + contextMessage);
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon, Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
@ -344,34 +344,34 @@
"Fixed overlay height mismatch " + contextMessage); "Fixed overlay height mismatch " + contextMessage);
} }
waitForViewer( function() { waitForViewer(function() {
checkOverlayPosition( "after opening using viewport coordinates" ); checkOverlayPosition("after opening using viewport coordinates");
viewer.viewport.zoomBy( 1.1 ).panBy( new OpenSeadragon.Point( 0.1, 0.2 ) ); viewer.viewport.zoomBy(1.1).panBy(new OpenSeadragon.Point(0.1, 0.2));
waitForViewer( function() { waitForViewer(function() {
checkOverlayPosition( "after zoom and pan using viewport coordinates" ); checkOverlayPosition("after zoom and pan using viewport coordinates");
viewer.viewport.goHome(); viewer.viewport.goHome();
waitForViewer( function() { waitForViewer(function() {
checkOverlayPosition( "after goHome using viewport coordinates" ); checkOverlayPosition("after goHome using viewport coordinates");
start(); start();
} ); });
} ); });
} ); });
} ); });
asyncTest( 'Overlays placement', function() { asyncTest('Overlays placement', function() {
var scalableOverlayLocation = new OpenSeadragon.Rect( 0.2, 0.1, 0.5, 0.1 ); var scalableOverlayLocation = new OpenSeadragon.Rect(0.2, 0.1, 0.5, 0.1);
var fixedOverlayLocation = new OpenSeadragon.Point( 0.5, 0.6 ); var fixedOverlayLocation = new OpenSeadragon.Point(0.5, 0.6);
viewer = OpenSeadragon( { viewer = OpenSeadragon({
id: 'example-overlays', id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/', prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi', tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests springStiffness: 100, // Faster animation = faster tests
overlays: [ { overlays: [{
x: scalableOverlayLocation.x, x: scalableOverlayLocation.x,
y: scalableOverlayLocation.y, y: scalableOverlayLocation.y,
width: scalableOverlayLocation.width, width: scalableOverlayLocation.width,
@ -383,11 +383,11 @@
y: fixedOverlayLocation.y, y: fixedOverlayLocation.y,
id: "fixed-overlay", id: "fixed-overlay",
placement: "TOP_LEFT" placement: "TOP_LEFT"
} ] }]
} ); });
// Scalable overlays are always TOP_LEFT // Scalable overlays are always TOP_LEFT
function checkScalableOverlayPosition( contextMessage ) { function checkScalableOverlayPosition(contextMessage) {
var viewport = viewer.viewport; var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
@ -399,7 +399,7 @@
"Y position mismatch " + contextMessage); "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(
@ -412,60 +412,60 @@
"Fixed overlay Y position mismatch " + contextMessage); "Fixed overlay Y position mismatch " + contextMessage);
} }
waitForViewer( function() { waitForViewer(function() {
checkScalableOverlayPosition( "with TOP_LEFT placement." ); checkScalableOverlayPosition("with TOP_LEFT placement.");
checkFixedOverlayPosition( new OpenSeadragon.Point( 0, 0 ), checkFixedOverlayPosition(new OpenSeadragon.Point(0, 0),
"with TOP_LEFT placement." ); "with TOP_LEFT placement.");
// Check that legacy OpenSeadragon.OverlayPlacement is still working // Check that legacy OpenSeadragon.OverlayPlacement is still working
viewer.updateOverlay( "overlay", scalableOverlayLocation, viewer.updateOverlay("overlay", scalableOverlayLocation,
OpenSeadragon.OverlayPlacement.CENTER ); OpenSeadragon.OverlayPlacement.CENTER);
viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation, viewer.updateOverlay("fixed-overlay", fixedOverlayLocation,
OpenSeadragon.OverlayPlacement.CENTER ); OpenSeadragon.OverlayPlacement.CENTER);
setTimeout( function() { setTimeout(function() {
checkScalableOverlayPosition( "with CENTER placement." ); checkScalableOverlayPosition("with CENTER placement.");
checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ), checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
"with CENTER placement." ); "with CENTER placement.");
// Check that new OpenSeadragon.Placement is working // Check that new OpenSeadragon.Placement is working
viewer.updateOverlay( "overlay", scalableOverlayLocation, viewer.updateOverlay("overlay", scalableOverlayLocation,
OpenSeadragon.Placement.BOTTOM_RIGHT ); OpenSeadragon.Placement.BOTTOM_RIGHT);
viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation, viewer.updateOverlay("fixed-overlay", fixedOverlayLocation,
OpenSeadragon.Placement.BOTTOM_RIGHT ); OpenSeadragon.Placement.BOTTOM_RIGHT);
setTimeout( function() { setTimeout(function() {
checkScalableOverlayPosition( "with BOTTOM_RIGHT placement." ); checkScalableOverlayPosition("with BOTTOM_RIGHT placement.");
checkFixedOverlayPosition( new OpenSeadragon.Point( -70, -60 ), checkFixedOverlayPosition(new OpenSeadragon.Point(-70, -60),
"with BOTTOM_RIGHT placement." ); "with BOTTOM_RIGHT placement.");
start(); start();
}, 100 ); }, 100);
}, 100 ); }, 100);
} ); });
} ); });
asyncTest( 'Overlays placement and resizing check', function() { asyncTest('Overlays placement and resizing check', function() {
var fixedOverlayLocation = new OpenSeadragon.Point( 0.5, 0.6 ); var fixedOverlayLocation = new OpenSeadragon.Point(0.5, 0.6);
viewer = OpenSeadragon( { viewer = OpenSeadragon({
id: 'example-overlays', id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/', prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi', tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests springStiffness: 100, // Faster animation = faster tests
overlays: [ { overlays: [{
x: fixedOverlayLocation.x, x: fixedOverlayLocation.x,
y: fixedOverlayLocation.y, y: fixedOverlayLocation.y,
id: "fixed-overlay", id: "fixed-overlay",
placement: "CENTER", placement: "CENTER",
checkResize: true checkResize: true
} ] }]
} ); });
function checkFixedOverlayPosition( expectedOffset, contextMessage ) { function checkFixedOverlayPosition(expectedOffset, contextMessage) {
var viewport = viewer.viewport; var viewport = viewer.viewport;
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
@ -478,114 +478,271 @@
"Fixed overlay Y position mismatch " + contextMessage); "Fixed overlay Y position mismatch " + contextMessage);
} }
waitForViewer( function() { waitForViewer(function() {
checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ), checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
"with overlay of size 70,60." ); "with overlay of size 70,60.");
$( "#fixed-overlay" ).width( 50 ); $("#fixed-overlay").width(50);
$( "#fixed-overlay" ).height( 40 ); $("#fixed-overlay").height(40);
// The resizing of the overlays is not detected by the viewer's loop. // The resizing of the overlays is not detected by the viewer's loop.
viewer.forceRedraw(); viewer.forceRedraw();
setTimeout( function() { setTimeout(function() {
checkFixedOverlayPosition( new OpenSeadragon.Point( -25, -20 ), checkFixedOverlayPosition(new OpenSeadragon.Point(-25, -20),
"with overlay of size 50,40." ); "with overlay of size 50,40.");
// Restore original size // Restore original size
$( "#fixed-overlay" ).width( 70 ); $("#fixed-overlay").width(70);
$( "#fixed-overlay" ).height( 60 ); $("#fixed-overlay").height(60);
start(); start();
}, 100 ); }, 100);
} ); });
} ); });
asyncTest( 'Overlays placement and no resizing check', function() { asyncTest('Overlays placement and no resizing check', function() {
var fixedOverlayLocation = new OpenSeadragon.Point( 0.5, 0.6 ); var fixedOverlayLocation = new OpenSeadragon.Point(0.5, 0.6);
viewer = OpenSeadragon( { viewer = OpenSeadragon({
id: 'example-overlays', id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/', prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi', tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests springStiffness: 100, // Faster animation = faster tests
overlays: [ { overlays: [{
x: fixedOverlayLocation.x, x: fixedOverlayLocation.x,
y: fixedOverlayLocation.y, y: fixedOverlayLocation.y,
id: "fixed-overlay", id: "fixed-overlay",
placement: "CENTER", placement: "CENTER",
checkResize: false checkResize: false
} ] }]
} ); });
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))
.plus(expectedOffset); .plus(expectedOffset);
var actPosition = $( "#fixed-overlay" ).position(); var actPosition = $("#fixed-overlay").position();
Util.assessNumericValue(actPosition.left, expPosition.x, epsilon, Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
"Fixed overlay X position mismatch " + contextMessage); "Fixed overlay X position mismatch " + contextMessage);
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon, Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
"Fixed overlay Y position mismatch " + contextMessage); "Fixed overlay Y position mismatch " + contextMessage);
} }
waitForViewer( function() { waitForViewer(function() {
checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ), checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
"with overlay of size 70,60." ); "with overlay of size 70,60.");
$( "#fixed-overlay" ).width( 50 ); $("#fixed-overlay").width(50);
$( "#fixed-overlay" ).height( 40 ); $("#fixed-overlay").height(40);
// The resizing of the overlays is not detected by the viewer's loop. // The resizing of the overlays is not detected by the viewer's loop.
viewer.forceRedraw(); viewer.forceRedraw();
setTimeout( function() { setTimeout(function() {
checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ), checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
"with overlay of size 50,40." ); "with overlay of size 50,40.");
// Restore original size // Restore original size
$( "#fixed-overlay" ).width( 70 ); $("#fixed-overlay").width(70);
$( "#fixed-overlay" ).height( 60 ); $("#fixed-overlay").height(60);
start(); start();
}, 100 ); }, 100);
} ); });
} ); });
// ---------- // ----------
asyncTest('overlays appear immediately', function() { asyncTest('overlays appear immediately', function() {
equal($('#immediate-overlay0').length, 0, 'overlay 0 does not exist'); equal($('#immediate-overlay0').length, 0, 'overlay 0 does not exist');
equal($('#immediate-overlay1').length, 0, 'overlay 1 does not exist'); equal($('#immediate-overlay1').length, 0, 'overlay 1 does not exist');
viewer = OpenSeadragon( { viewer = OpenSeadragon({
id: 'example-overlays', id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/', prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi', tileSources: '/test/data/testpattern.dzi',
springStiffness: 100, // Faster animation = faster tests springStiffness: 100, // Faster animation = faster tests
overlays: [ { overlays: [{
x: 0, x: 0,
y: 0, y: 0,
id: "immediate-overlay0" id: "immediate-overlay0"
} ] }]
} ); });
viewer.addHandler('open', function() { viewer.addHandler('open', function() {
equal($('#immediate-overlay0').length, 1, 'overlay 0 exists'); equal($('#immediate-overlay0').length, 1, 'overlay 0 exists');
viewer.addOverlay( { viewer.addOverlay({
x: 0, x: 0,
y: 0, y: 0,
id: "immediate-overlay1" id: "immediate-overlay1"
} ); });
equal($('#immediate-overlay1').length, 1, 'overlay 1 exists'); equal($('#immediate-overlay1').length, 1, 'overlay 1 exists');
start(); start();
}); });
}); });
} )( ); // ----------
asyncTest('Overlay scaled horizontally only', function() {
viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi',
springStiffness: 100 // Faster animation = faster tests
});
viewer.addHandler('open', function() {
viewer.addOverlay({
id: "horizontally-scaled-overlay",
x: 0,
y: 0,
width: 1
});
var width = $("#horizontally-scaled-overlay").width();
var height = 100;
var zoom = 1.1;
$("#horizontally-scaled-overlay").get(0).style.height = height + "px";
viewer.viewport.zoomBy(zoom);
waitForViewer(function() {
var newWidth = $("#horizontally-scaled-overlay").width();
var newHeight = $("#horizontally-scaled-overlay").height();
equal(newWidth, width * zoom, "Width should be scaled.");
equal(newHeight, height, "Height should not be scaled.");
start();
});
});
});
// ----------
asyncTest('Overlay scaled vertically only', function() {
viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi',
springStiffness: 100 // Faster animation = faster tests
});
viewer.addHandler('open', function() {
viewer.addOverlay({
id: "vertically-scaled-overlay",
x: 0,
y: 0,
height: 1
});
var width = 100;
var height = $("#vertically-scaled-overlay").height();
var zoom = 1.1;
$("#vertically-scaled-overlay").get(0).style.width = width + "px";
viewer.viewport.zoomBy(zoom);
waitForViewer(function() {
var newWidth = $("#vertically-scaled-overlay").width();
var newHeight = $("#vertically-scaled-overlay").height();
equal(newWidth, width, "Width should not be scaled.");
equal(newHeight, height * zoom, "Height should be scaled.");
start();
});
});
});
asyncTest('Overlay.getBounds', function() {
viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi',
springStiffness: 100 // Faster animation = faster tests
});
viewer.addHandler('open', function() {
viewer.addOverlay({
id: "fully-scaled-overlay",
x: 1,
y: 1,
width: 1,
height: 1,
placement: OpenSeadragon.Placement.BOTTOM_RIGHT
});
viewer.addOverlay({
id: "horizontally-scaled-overlay",
x: 0.5,
y: 0.5,
width: 1,
placement: OpenSeadragon.Placement.CENTER
});
viewer.addOverlay({
id: "vertically-scaled-overlay",
x: 0,
y: 0.5,
height: 1,
placement: OpenSeadragon.Placement.LEFT
});
viewer.addOverlay({
id: "not-scaled-overlay",
x: 1,
y: 0,
placement: OpenSeadragon.Placement.TOP_RIGHT
});
var notScaledWidth = 100;
var notScaledHeight = 100;
$("#horizontally-scaled-overlay").get(0).style.height = notScaledHeight + "px";
$("#vertically-scaled-overlay").get(0).style.width = notScaledWidth + "px";
$("#not-scaled-overlay").get(0).style.width = notScaledWidth + "px";
$("#not-scaled-overlay").get(0).style.height = notScaledHeight + "px";
var notScaledSize = viewer.viewport.deltaPointsFromPixelsNoRotate(
new OpenSeadragon.Point(notScaledWidth, notScaledHeight));
// Force refresh to takes new dimensions into account.
viewer._drawOverlays();
var actualBounds = viewer.getOverlayById("fully-scaled-overlay")
.getBounds();
var expectedBounds = new OpenSeadragon.Rect(0, 0, 1, 1);
ok(expectedBounds.equals(actualBounds),
"The fully scaled overlay should have bounds " +
expectedBounds.toString() + " but found " + actualBounds);
actualBounds = viewer.getOverlayById("horizontally-scaled-overlay")
.getBounds(viewer.viewport);
expectedBounds = new OpenSeadragon.Rect(
0, 0.5 - notScaledSize.y / 2, 1, notScaledSize.y);
ok(expectedBounds.equals(actualBounds),
"The horizontally scaled overlay should have bounds " +
expectedBounds.toString() + " but found " + actualBounds);
actualBounds = viewer.getOverlayById("vertically-scaled-overlay")
.getBounds(viewer.viewport);
expectedBounds = new OpenSeadragon.Rect(
0, 0, notScaledSize.x, 1);
ok(expectedBounds.equals(actualBounds),
"The vertically scaled overlay should have bounds " +
expectedBounds.toString() + " but found " + actualBounds);
actualBounds = viewer.getOverlayById("not-scaled-overlay")
.getBounds(viewer.viewport);
expectedBounds = new OpenSeadragon.Rect(
1 - notScaledSize.x, 0, notScaledSize.x, notScaledSize.y);
ok(expectedBounds.equals(actualBounds),
"The not scaled overlay should have bounds " +
expectedBounds.toString() + " but found " + actualBounds);
start();
});
});
})();