mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 06:36:11 +03:00
Fix viewer.addOverlay and Overlay.getBounds
This commit is contained in:
Antoine Vandecreme
parent
577327a629
commit
70b39d681b
@ -383,9 +383,9 @@
|
||||
var width = this.width;
|
||||
var height = this.height;
|
||||
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');
|
||||
var size = viewport.deltaPointsFromPixels(this.size, true);
|
||||
var size = viewport.deltaPointsFromPixelsNoRotate(this.size, true);
|
||||
if (width === null) {
|
||||
width = size.x;
|
||||
}
|
||||
@ -393,8 +393,9 @@
|
||||
height = size.y;
|
||||
}
|
||||
}
|
||||
return new $.Rect(
|
||||
this.location.x, this.location.y, width, height);
|
||||
var location = this.location.clone();
|
||||
this.adjust(location, new $.Point(width, height));
|
||||
return new $.Rect(location.x, location.y, width, height);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -2201,32 +2201,23 @@ function getOverlayObject( viewer, overlay ) {
|
||||
}
|
||||
|
||||
var location = overlay.location;
|
||||
if ( !location ) {
|
||||
if ( overlay.width && overlay.height ) {
|
||||
location = overlay.px !== undefined ?
|
||||
viewer.viewport.imageToViewportRectangle( new $.Rect(
|
||||
overlay.px,
|
||||
overlay.py,
|
||||
overlay.width,
|
||||
overlay.height
|
||||
) ) :
|
||||
new $.Rect(
|
||||
overlay.x,
|
||||
overlay.y,
|
||||
overlay.width,
|
||||
overlay.height
|
||||
);
|
||||
} else {
|
||||
location = overlay.px !== undefined ?
|
||||
viewer.viewport.imageToViewportCoordinates( new $.Point(
|
||||
overlay.px,
|
||||
overlay.py
|
||||
) ) :
|
||||
new $.Point(
|
||||
overlay.x,
|
||||
overlay.y
|
||||
);
|
||||
var width = overlay.width;
|
||||
var height = overlay.height;
|
||||
if (!location) {
|
||||
var x = overlay.x;
|
||||
var y = overlay.y;
|
||||
if (overlay.px !== undefined) {
|
||||
var rect = viewer.viewport.imageToViewportRectangle(new $.Rect(
|
||||
overlay.px,
|
||||
overlay.py,
|
||||
width || 0,
|
||||
height || 0));
|
||||
x = rect.x;
|
||||
y = rect.y;
|
||||
width = width !== undefined ? rect.width : undefined;
|
||||
height = height !== undefined ? rect.height : undefined;
|
||||
}
|
||||
location = new $.Point(x, y);
|
||||
}
|
||||
|
||||
var placement = overlay.placement;
|
||||
@ -2240,8 +2231,8 @@ function getOverlayObject( viewer, overlay ) {
|
||||
placement: placement,
|
||||
onDraw: overlay.onDraw,
|
||||
checkResize: overlay.checkResize,
|
||||
width: overlay.width,
|
||||
height: overlay.height,
|
||||
width: width,
|
||||
height: height,
|
||||
rotationMode: overlay.rotationMode
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,111 +1,111 @@
|
||||
/* global QUnit, module, Util, $, console, test, asyncTest, start, ok, equal, testLog */
|
||||
|
||||
( function() {
|
||||
(function() {
|
||||
var viewer;
|
||||
// jQuery.position can give results quite different than what set in style.left
|
||||
var epsilon = 1;
|
||||
|
||||
module( "Overlays", {
|
||||
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 );
|
||||
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();
|
||||
},
|
||||
teardown: function() {
|
||||
resetTestVariables();
|
||||
}
|
||||
} );
|
||||
});
|
||||
|
||||
var resetTestVariables = function() {
|
||||
if ( viewer ) {
|
||||
if (viewer) {
|
||||
viewer.close();
|
||||
}
|
||||
};
|
||||
|
||||
function waitForViewer( handler, count ) {
|
||||
if ( typeof count !== "number" ) {
|
||||
function waitForViewer(handler, count) {
|
||||
if (typeof count !== "number") {
|
||||
count = 0;
|
||||
}
|
||||
var ready = viewer.isOpen() &&
|
||||
viewer.drawer !== null &&
|
||||
!viewer.world.needsDraw() &&
|
||||
Util.equalsWithVariance( viewer.viewport.getBounds( true ).x,
|
||||
viewer.viewport.getBounds().x, 0.000 ) &&
|
||||
Util.equalsWithVariance( viewer.viewport.getBounds( true ).y,
|
||||
viewer.viewport.getBounds().y, 0.000 ) &&
|
||||
Util.equalsWithVariance( viewer.viewport.getBounds( true ).width,
|
||||
viewer.viewport.getBounds().width, 0.000 );
|
||||
Util.equalsWithVariance(viewer.viewport.getBounds(true).x,
|
||||
viewer.viewport.getBounds().x, 0.000) &&
|
||||
Util.equalsWithVariance(viewer.viewport.getBounds(true).y,
|
||||
viewer.viewport.getBounds().y, 0.000) &&
|
||||
Util.equalsWithVariance(viewer.viewport.getBounds(true).width,
|
||||
viewer.viewport.getBounds().width, 0.000);
|
||||
|
||||
if ( ready ) {
|
||||
if (ready) {
|
||||
handler();
|
||||
} else if ( count < 50 ) {
|
||||
} else if (count < 50) {
|
||||
count++;
|
||||
setTimeout( function() {
|
||||
waitForViewer( handler, count );
|
||||
}, 100 );
|
||||
setTimeout(function() {
|
||||
waitForViewer(handler, count);
|
||||
}, 100);
|
||||
} else {
|
||||
console.log( "waitForViewer:" + viewer.isOpen( ) + ":" + viewer.drawer +
|
||||
":" + viewer.world.needsDraw() );
|
||||
console.log("waitForViewer:" + viewer.isOpen( ) + ":" + viewer.drawer +
|
||||
":" + viewer.world.needsDraw());
|
||||
handler();
|
||||
}
|
||||
}
|
||||
|
||||
asyncTest( 'Overlays via viewer options', function() {
|
||||
asyncTest('Overlays via viewer options', function() {
|
||||
|
||||
viewer = OpenSeadragon( {
|
||||
viewer = OpenSeadragon({
|
||||
id: 'example-overlays',
|
||||
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
|
||||
overlays: [ {
|
||||
overlays: [{
|
||||
x: 0.1,
|
||||
y: 0.4,
|
||||
width: 0.09,
|
||||
height: 0.09,
|
||||
id: "overlay"
|
||||
} ]
|
||||
} );
|
||||
viewer.addHandler( 'open', openHandler );
|
||||
}]
|
||||
});
|
||||
viewer.addHandler('open', openHandler);
|
||||
|
||||
function openHandler() {
|
||||
viewer.removeHandler( 'open', openHandler );
|
||||
viewer.removeHandler('open', openHandler);
|
||||
|
||||
equal( viewer.overlays.length, 1, "Global overlay should be added." );
|
||||
equal( viewer.currentOverlays.length, 1, "Global overlay should be open." );
|
||||
equal(viewer.overlays.length, 1, "Global overlay should be added.");
|
||||
equal(viewer.currentOverlays.length, 1, "Global overlay should be open.");
|
||||
|
||||
viewer.addHandler( 'open', openPageHandler );
|
||||
viewer.goToPage( 1 );
|
||||
viewer.addHandler('open', openPageHandler);
|
||||
viewer.goToPage(1);
|
||||
}
|
||||
|
||||
function openPageHandler() {
|
||||
viewer.removeHandler( 'open', openPageHandler );
|
||||
viewer.removeHandler('open', openPageHandler);
|
||||
|
||||
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.overlays.length, 1, "Global overlay should stay 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();
|
||||
}
|
||||
|
||||
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.currentOverlays.length, 0, "Global overlay should be closed 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.");
|
||||
|
||||
start();
|
||||
}
|
||||
} );
|
||||
});
|
||||
|
||||
asyncTest( 'Page Overlays via viewer options', function() {
|
||||
asyncTest('Page Overlays via viewer options', function() {
|
||||
|
||||
viewer = OpenSeadragon( {
|
||||
viewer = OpenSeadragon({
|
||||
id: 'example-overlays',
|
||||
prefixUrl: '/build/openseadragon/images/',
|
||||
tileSources: [ {
|
||||
tileSources: [{
|
||||
Image: {
|
||||
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
|
||||
Url: "/test/data/testpattern_files/",
|
||||
@ -117,13 +117,13 @@
|
||||
Height: 1000
|
||||
}
|
||||
},
|
||||
overlays: [ {
|
||||
overlays: [{
|
||||
x: 0.1,
|
||||
y: 0.4,
|
||||
width: 0.09,
|
||||
height: 0.09,
|
||||
id: "overlay"
|
||||
} ]
|
||||
}]
|
||||
}, {
|
||||
Image: {
|
||||
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
|
||||
@ -136,96 +136,96 @@
|
||||
Height: 1000
|
||||
}
|
||||
}
|
||||
} ],
|
||||
}],
|
||||
springStiffness: 100 // Faster animation = faster tests
|
||||
} );
|
||||
viewer.addHandler( 'open', openHandler );
|
||||
});
|
||||
viewer.addHandler('open', openHandler);
|
||||
|
||||
function openHandler() {
|
||||
viewer.removeHandler( 'open', openHandler );
|
||||
viewer.removeHandler('open', openHandler);
|
||||
|
||||
equal( viewer.overlays.length, 0, "No global overlay should be added." );
|
||||
equal( viewer.currentOverlays.length, 1, "Page overlay should be open." );
|
||||
equal(viewer.overlays.length, 0, "No global overlay should be added.");
|
||||
equal(viewer.currentOverlays.length, 1, "Page overlay should be open.");
|
||||
|
||||
viewer.addHandler( 'open', openPageHandler );
|
||||
viewer.goToPage( 1 );
|
||||
viewer.addHandler('open', openPageHandler);
|
||||
viewer.goToPage(1);
|
||||
}
|
||||
|
||||
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.currentOverlays.length, 0, "No page overlay should be opened 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.");
|
||||
|
||||
viewer.addHandler( 'close', closeHandler );
|
||||
viewer.addHandler('close', closeHandler);
|
||||
viewer.close();
|
||||
}
|
||||
|
||||
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.currentOverlays.length, 0, "Page overlay should be closed 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.");
|
||||
|
||||
start();
|
||||
}
|
||||
} );
|
||||
});
|
||||
|
||||
asyncTest( 'Overlays via addOverlay method', function() {
|
||||
asyncTest('Overlays via addOverlay method', function() {
|
||||
|
||||
viewer = OpenSeadragon( {
|
||||
viewer = OpenSeadragon({
|
||||
id: 'example-overlays',
|
||||
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
|
||||
} );
|
||||
viewer.addHandler( 'open', openHandler );
|
||||
});
|
||||
viewer.addHandler('open', openHandler);
|
||||
|
||||
function openHandler() {
|
||||
viewer.removeHandler( 'open', openHandler );
|
||||
viewer.removeHandler('open', openHandler);
|
||||
|
||||
equal( viewer.overlays.length, 0, "No global overlay should be added." );
|
||||
equal( viewer.currentOverlays.length, 0, "No overlay should be open." );
|
||||
equal(viewer.overlays.length, 0, "No global overlay should be added.");
|
||||
equal(viewer.currentOverlays.length, 0, "No overlay should be open.");
|
||||
|
||||
var rect = new OpenSeadragon.Rect( 0.1, 0.1, 0.1, 0.1 );
|
||||
var overlay = $( "<div/>" ).prop( "id", "overlay" ).get( 0 );
|
||||
viewer.addOverlay( overlay, rect );
|
||||
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." );
|
||||
var rect = new OpenSeadragon.Rect(0.1, 0.1, 0.1, 0.1);
|
||||
var overlay = $("<div/>").prop("id", "overlay").get(0);
|
||||
viewer.addOverlay(overlay, rect);
|
||||
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.");
|
||||
|
||||
viewer.addHandler( 'open', openPageHandler );
|
||||
viewer.goToPage( 1 );
|
||||
viewer.addHandler('open', openPageHandler);
|
||||
viewer.goToPage(1);
|
||||
}
|
||||
|
||||
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.currentOverlays.length, 0, "Manual overlay should be removed 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.");
|
||||
|
||||
viewer.addHandler( 'close', closeHandler );
|
||||
viewer.addHandler('close', closeHandler);
|
||||
viewer.close();
|
||||
}
|
||||
|
||||
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.currentOverlays.length, 0, "Manual overlay should be removed 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.");
|
||||
|
||||
start();
|
||||
}
|
||||
|
||||
} );
|
||||
});
|
||||
|
||||
asyncTest( 'Overlays size in pixels', function() {
|
||||
asyncTest('Overlays size in pixels', function() {
|
||||
|
||||
viewer = OpenSeadragon( {
|
||||
viewer = OpenSeadragon({
|
||||
id: 'example-overlays',
|
||||
prefixUrl: '/build/openseadragon/images/',
|
||||
tileSources: '/test/data/testpattern.dzi',
|
||||
springStiffness: 100, // Faster animation = faster tests
|
||||
overlays: [ {
|
||||
overlays: [{
|
||||
px: 13,
|
||||
py: 120,
|
||||
width: 124,
|
||||
@ -236,8 +236,8 @@
|
||||
py: 500,
|
||||
id: "fixed-overlay",
|
||||
placement: "TOP_LEFT"
|
||||
} ]
|
||||
} );
|
||||
}]
|
||||
});
|
||||
|
||||
function checkOverlayPosition(contextMessage) {
|
||||
var viewport = viewer.viewport;
|
||||
@ -273,31 +273,31 @@
|
||||
"Fixed overlay height mismatch " + contextMessage);
|
||||
}
|
||||
|
||||
waitForViewer( function() {
|
||||
checkOverlayPosition( "after opening using image coordinates" );
|
||||
waitForViewer(function() {
|
||||
checkOverlayPosition("after opening using image coordinates");
|
||||
|
||||
viewer.viewport.zoomBy( 1.1 ).panBy( new OpenSeadragon.Point( 0.1, 0.2 ) );
|
||||
waitForViewer( function() {
|
||||
checkOverlayPosition( "after zoom and pan using image coordinates" );
|
||||
viewer.viewport.zoomBy(1.1).panBy(new OpenSeadragon.Point(0.1, 0.2));
|
||||
waitForViewer(function() {
|
||||
checkOverlayPosition("after zoom and pan using image coordinates");
|
||||
|
||||
viewer.viewport.goHome();
|
||||
waitForViewer( function() {
|
||||
checkOverlayPosition( "after goHome using image coordinates" );
|
||||
waitForViewer(function() {
|
||||
checkOverlayPosition("after goHome using image coordinates");
|
||||
start();
|
||||
} );
|
||||
} );
|
||||
});
|
||||
});
|
||||
|
||||
} );
|
||||
} );
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest( 'Overlays size in points', function() {
|
||||
asyncTest('Overlays size in points', function() {
|
||||
|
||||
viewer = OpenSeadragon( {
|
||||
viewer = OpenSeadragon({
|
||||
id: 'example-overlays',
|
||||
prefixUrl: '/build/openseadragon/images/',
|
||||
tileSources: '/test/data/testpattern.dzi',
|
||||
springStiffness: 100, // Faster animation = faster tests
|
||||
overlays: [ {
|
||||
overlays: [{
|
||||
x: 0.2,
|
||||
y: 0.1,
|
||||
width: 0.5,
|
||||
@ -308,15 +308,15 @@
|
||||
y: 0.6,
|
||||
id: "fixed-overlay",
|
||||
placement: "TOP_LEFT"
|
||||
} ]
|
||||
} );
|
||||
}]
|
||||
});
|
||||
|
||||
function checkOverlayPosition( contextMessage ) {
|
||||
function checkOverlayPosition(contextMessage) {
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
var expPosition = viewport.viewportToViewerElementCoordinates(
|
||||
new OpenSeadragon.Point(0.2, 0.1));
|
||||
var actPosition = $( "#overlay" ).position();
|
||||
var actPosition = $("#overlay").position();
|
||||
Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
|
||||
"X position mismatch " + contextMessage);
|
||||
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
|
||||
@ -344,34 +344,34 @@
|
||||
"Fixed overlay height mismatch " + contextMessage);
|
||||
}
|
||||
|
||||
waitForViewer( function() {
|
||||
checkOverlayPosition( "after opening using viewport coordinates" );
|
||||
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.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" );
|
||||
waitForViewer(function() {
|
||||
checkOverlayPosition("after goHome using viewport coordinates");
|
||||
start();
|
||||
} );
|
||||
} );
|
||||
});
|
||||
});
|
||||
|
||||
} );
|
||||
} );
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest( 'Overlays placement', function() {
|
||||
asyncTest('Overlays placement', function() {
|
||||
|
||||
var scalableOverlayLocation = new OpenSeadragon.Rect( 0.2, 0.1, 0.5, 0.1 );
|
||||
var fixedOverlayLocation = new OpenSeadragon.Point( 0.5, 0.6 );
|
||||
var scalableOverlayLocation = new OpenSeadragon.Rect(0.2, 0.1, 0.5, 0.1);
|
||||
var fixedOverlayLocation = new OpenSeadragon.Point(0.5, 0.6);
|
||||
|
||||
viewer = OpenSeadragon( {
|
||||
viewer = OpenSeadragon({
|
||||
id: 'example-overlays',
|
||||
prefixUrl: '/build/openseadragon/images/',
|
||||
tileSources: '/test/data/testpattern.dzi',
|
||||
springStiffness: 100, // Faster animation = faster tests
|
||||
overlays: [ {
|
||||
overlays: [{
|
||||
x: scalableOverlayLocation.x,
|
||||
y: scalableOverlayLocation.y,
|
||||
width: scalableOverlayLocation.width,
|
||||
@ -383,11 +383,11 @@
|
||||
y: fixedOverlayLocation.y,
|
||||
id: "fixed-overlay",
|
||||
placement: "TOP_LEFT"
|
||||
} ]
|
||||
} );
|
||||
}]
|
||||
});
|
||||
|
||||
// Scalable overlays are always TOP_LEFT
|
||||
function checkScalableOverlayPosition( contextMessage ) {
|
||||
function checkScalableOverlayPosition(contextMessage) {
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
var expPosition = viewport.viewportToViewerElementCoordinates(
|
||||
@ -399,7 +399,7 @@
|
||||
"Y position mismatch " + contextMessage);
|
||||
}
|
||||
|
||||
function checkFixedOverlayPosition( expectedOffset, contextMessage ) {
|
||||
function checkFixedOverlayPosition(expectedOffset, contextMessage) {
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
var expPosition = viewport.viewportToViewerElementCoordinates(
|
||||
@ -412,60 +412,60 @@
|
||||
"Fixed overlay Y position mismatch " + contextMessage);
|
||||
}
|
||||
|
||||
waitForViewer( function() {
|
||||
waitForViewer(function() {
|
||||
|
||||
checkScalableOverlayPosition( "with TOP_LEFT placement." );
|
||||
checkFixedOverlayPosition( new OpenSeadragon.Point( 0, 0 ),
|
||||
"with TOP_LEFT placement." );
|
||||
checkScalableOverlayPosition("with TOP_LEFT placement.");
|
||||
checkFixedOverlayPosition(new OpenSeadragon.Point(0, 0),
|
||||
"with TOP_LEFT placement.");
|
||||
|
||||
// Check that legacy OpenSeadragon.OverlayPlacement is still working
|
||||
viewer.updateOverlay( "overlay", scalableOverlayLocation,
|
||||
OpenSeadragon.OverlayPlacement.CENTER );
|
||||
viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation,
|
||||
OpenSeadragon.OverlayPlacement.CENTER );
|
||||
viewer.updateOverlay("overlay", scalableOverlayLocation,
|
||||
OpenSeadragon.OverlayPlacement.CENTER);
|
||||
viewer.updateOverlay("fixed-overlay", fixedOverlayLocation,
|
||||
OpenSeadragon.OverlayPlacement.CENTER);
|
||||
|
||||
setTimeout( function() {
|
||||
checkScalableOverlayPosition( "with CENTER placement." );
|
||||
checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ),
|
||||
"with CENTER placement." );
|
||||
setTimeout(function() {
|
||||
checkScalableOverlayPosition("with CENTER placement.");
|
||||
checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
|
||||
"with CENTER placement.");
|
||||
|
||||
// Check that new OpenSeadragon.Placement is working
|
||||
viewer.updateOverlay( "overlay", scalableOverlayLocation,
|
||||
OpenSeadragon.Placement.BOTTOM_RIGHT );
|
||||
viewer.updateOverlay( "fixed-overlay", fixedOverlayLocation,
|
||||
OpenSeadragon.Placement.BOTTOM_RIGHT );
|
||||
setTimeout( function() {
|
||||
checkScalableOverlayPosition( "with BOTTOM_RIGHT placement." );
|
||||
checkFixedOverlayPosition( new OpenSeadragon.Point( -70, -60 ),
|
||||
"with BOTTOM_RIGHT placement." );
|
||||
viewer.updateOverlay("overlay", scalableOverlayLocation,
|
||||
OpenSeadragon.Placement.BOTTOM_RIGHT);
|
||||
viewer.updateOverlay("fixed-overlay", fixedOverlayLocation,
|
||||
OpenSeadragon.Placement.BOTTOM_RIGHT);
|
||||
setTimeout(function() {
|
||||
checkScalableOverlayPosition("with BOTTOM_RIGHT placement.");
|
||||
checkFixedOverlayPosition(new OpenSeadragon.Point(-70, -60),
|
||||
"with BOTTOM_RIGHT placement.");
|
||||
|
||||
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',
|
||||
prefixUrl: '/build/openseadragon/images/',
|
||||
tileSources: '/test/data/testpattern.dzi',
|
||||
springStiffness: 100, // Faster animation = faster tests
|
||||
overlays: [ {
|
||||
overlays: [{
|
||||
x: fixedOverlayLocation.x,
|
||||
y: fixedOverlayLocation.y,
|
||||
id: "fixed-overlay",
|
||||
placement: "CENTER",
|
||||
checkResize: true
|
||||
} ]
|
||||
} );
|
||||
}]
|
||||
});
|
||||
|
||||
function checkFixedOverlayPosition( expectedOffset, contextMessage ) {
|
||||
function checkFixedOverlayPosition(expectedOffset, contextMessage) {
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
var expPosition = viewport.viewportToViewerElementCoordinates(
|
||||
@ -478,114 +478,271 @@
|
||||
"Fixed overlay Y position mismatch " + contextMessage);
|
||||
}
|
||||
|
||||
waitForViewer( function() {
|
||||
checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ),
|
||||
"with overlay of size 70,60." );
|
||||
waitForViewer(function() {
|
||||
checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
|
||||
"with overlay of size 70,60.");
|
||||
|
||||
$( "#fixed-overlay" ).width( 50 );
|
||||
$( "#fixed-overlay" ).height( 40 );
|
||||
$("#fixed-overlay").width(50);
|
||||
$("#fixed-overlay").height(40);
|
||||
|
||||
// The resizing of the overlays is not detected by the viewer's loop.
|
||||
viewer.forceRedraw();
|
||||
|
||||
setTimeout( function() {
|
||||
checkFixedOverlayPosition( new OpenSeadragon.Point( -25, -20 ),
|
||||
"with overlay of size 50,40." );
|
||||
setTimeout(function() {
|
||||
checkFixedOverlayPosition(new OpenSeadragon.Point(-25, -20),
|
||||
"with overlay of size 50,40.");
|
||||
|
||||
// Restore original size
|
||||
$( "#fixed-overlay" ).width( 70 );
|
||||
$( "#fixed-overlay" ).height( 60 );
|
||||
$("#fixed-overlay").width(70);
|
||||
$("#fixed-overlay").height(60);
|
||||
|
||||
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',
|
||||
prefixUrl: '/build/openseadragon/images/',
|
||||
tileSources: '/test/data/testpattern.dzi',
|
||||
springStiffness: 100, // Faster animation = faster tests
|
||||
overlays: [ {
|
||||
overlays: [{
|
||||
x: fixedOverlayLocation.x,
|
||||
y: fixedOverlayLocation.y,
|
||||
id: "fixed-overlay",
|
||||
placement: "CENTER",
|
||||
checkResize: false
|
||||
} ]
|
||||
} );
|
||||
}]
|
||||
});
|
||||
|
||||
function checkFixedOverlayPosition( expectedOffset, contextMessage ) {
|
||||
function checkFixedOverlayPosition(expectedOffset, contextMessage) {
|
||||
var viewport = viewer.viewport;
|
||||
|
||||
var expPosition = viewport.viewportToViewerElementCoordinates(
|
||||
new OpenSeadragon.Point(0.5, 0.6))
|
||||
.plus(expectedOffset);
|
||||
var actPosition = $( "#fixed-overlay" ).position();
|
||||
var actPosition = $("#fixed-overlay").position();
|
||||
Util.assessNumericValue(actPosition.left, expPosition.x, epsilon,
|
||||
"Fixed overlay X position mismatch " + contextMessage);
|
||||
Util.assessNumericValue(actPosition.top, expPosition.y, epsilon,
|
||||
"Fixed overlay Y position mismatch " + contextMessage);
|
||||
}
|
||||
|
||||
waitForViewer( function() {
|
||||
checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ),
|
||||
"with overlay of size 70,60." );
|
||||
waitForViewer(function() {
|
||||
checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
|
||||
"with overlay of size 70,60.");
|
||||
|
||||
$( "#fixed-overlay" ).width( 50 );
|
||||
$( "#fixed-overlay" ).height( 40 );
|
||||
$("#fixed-overlay").width(50);
|
||||
$("#fixed-overlay").height(40);
|
||||
|
||||
// The resizing of the overlays is not detected by the viewer's loop.
|
||||
viewer.forceRedraw();
|
||||
|
||||
setTimeout( function() {
|
||||
checkFixedOverlayPosition( new OpenSeadragon.Point( -35, -30 ),
|
||||
"with overlay of size 50,40." );
|
||||
setTimeout(function() {
|
||||
checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
|
||||
"with overlay of size 50,40.");
|
||||
|
||||
// Restore original size
|
||||
$( "#fixed-overlay" ).width( 70 );
|
||||
$( "#fixed-overlay" ).height( 60 );
|
||||
$("#fixed-overlay").width(70);
|
||||
$("#fixed-overlay").height(60);
|
||||
|
||||
start();
|
||||
}, 100 );
|
||||
} );
|
||||
}, 100);
|
||||
});
|
||||
|
||||
} );
|
||||
});
|
||||
|
||||
// ----------
|
||||
asyncTest('overlays appear immediately', function() {
|
||||
equal($('#immediate-overlay0').length, 0, 'overlay 0 does not exist');
|
||||
equal($('#immediate-overlay1').length, 0, 'overlay 1 does not exist');
|
||||
|
||||
viewer = OpenSeadragon( {
|
||||
viewer = OpenSeadragon({
|
||||
id: 'example-overlays',
|
||||
prefixUrl: '/build/openseadragon/images/',
|
||||
tileSources: '/test/data/testpattern.dzi',
|
||||
springStiffness: 100, // Faster animation = faster tests
|
||||
overlays: [ {
|
||||
overlays: [{
|
||||
x: 0,
|
||||
y: 0,
|
||||
id: "immediate-overlay0"
|
||||
} ]
|
||||
} );
|
||||
}]
|
||||
});
|
||||
|
||||
viewer.addHandler('open', function() {
|
||||
equal($('#immediate-overlay0').length, 1, 'overlay 0 exists');
|
||||
|
||||
viewer.addOverlay( {
|
||||
viewer.addOverlay({
|
||||
x: 0,
|
||||
y: 0,
|
||||
id: "immediate-overlay1"
|
||||
} );
|
||||
});
|
||||
|
||||
equal($('#immediate-overlay1').length, 1, 'overlay 1 exists');
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user